データID経由で切り替えることはできません

Question

オンロードを非表示にしてdata-idのpがクリックされたときに切り替えるスクリプトがあります。今すぐこのスクリプトは、.wc-galleryを最初に切り替えたときにのみ機能します。 hide()に戻すと、それは動作しません。

私はHTML内に複数の.gallery-container2を宣言しています。現在有効なものがある場合は正常に動作しますが、他の.gallery-container2から別のpをクリックすると、がhide()に変わり、最近クリックされたものがshow()になります。

HTML：

<div class="gallery-container2"> 
    <p data-id="1723"><strong>View before and after</strong></p> 
    <div class="gallery-item" data-id="1723"> 
     <div class="wc-gallery" style="display: none;"></div> 
    </div> 
</div> 

SCRIPT：あなたはそれを渡しているように、それは述語を取らないよう

$(window).load(function() { 
     $(".gallery-container2 .gallery-item .wc-gallery").hide(); 
    }); 
    $(".gallery-container2 p").click(function() { 
     var id = $(this).data('id'); 
     $(".gallery-container2").find('.gallery-item').each(function() { 
      $(this).find('.wc-gallery').toggle($(this).data('id') === id); 
     }); 
    }); 

Answer 1

はトグルの定義をチェックしてください。あなたは、各.gallery-item

$(".gallery-container2 p").click(function() { 
    var id = $(this).data('id'); 
    $("[data-id=" + id + "].gallery-item .wc-gallery").toggle() 
});