2017-11-18 11 views
0

私は<img><a>jqueryで複数のdivを表示するには?

現在、それが唯一の最後と呼ばれている方、どちらか一方が表示されます両方を表示する)(ショーを使用しようとしています。下のコードでは、それが来るのでhtml(img).show()になるでしょう。 $('.showimagediv').html(div,img).show();を実行するのと同じ効果があります。一つの変数に二つの文を結合しようとすると:

var img = ($('<a />', {href : this.getAttribute("data-permaLink"), 'class': 'permaLinkDiv'}),$('<img />', {src : this.getAttribute("data-url"), 'class': 'fullScreenimg'})); 

しか現れて<img>になります。誰もが同時に両方を見せる方法を知っていますか?

var imgToggle=false; 
    $('.box').on('click', function() { 
     var img = $('<img />', {src : this.getAttribute("data-url"), 'class': 'fullScreenimg'}); 
     var div = $('<a />', {href : this.getAttribute("data-permaLink"), 'class': 'permaLinkDiv'}); 
     if(imgToggle==true){ 
      $('.showimagediv').html(img).hide(); 
      imgToggle=false; 
     } 
     if(imgToggle==false){ 
      $('.showimagediv').html(div).show(); 
      $('.showimagediv').html(img).show(); 

      imgToggle=true; 
     } 

    }) 
    $('.showimagediv').on('click', function() { 
     var img = $('<img />', {src : this.getAttribute("data-url"), 'class': 'fullScreenimg'}); 
     var div = $('<a />', {href : this.getAttribute("data-permaLink"), 'class': 'permaLinkDiv'}); 
     if(imgToggle==true){ 
      $('.showimagediv').html(img).hide(); 
      divToggle=false; 
     } 

    }) 
+0

あなたが.showimagediv' 'の' innerHTML'を設定して、 '.showimagediv'を表示/非表示されているように見えます。ステートメントを分割してみてください。まず、 '.showimagediv'の' html() 'を設定し、' img'または 'div'を' show() 'または' hide() 'します。 – KarthaCoder

答えて

1

display:noneでCSSクラスを追加または削除してdivを表示できます。それは非常に簡単で良い方法です。

CSS:.hide{display:none;}

$('div').add('img').addClass('hide'); //or 
$('div').add('img').removeClass('hide'); 
+0

これは正しい方向に私を導いた。ありがとうございました! – onlineoctopus

関連する問題