3

wordpress ビルド用の簡単なコメント トグルをセットアップしようとしています。

CSS 

<div class="commenttoggle">
    <p class="popcom">Show Comments</p>
                                     ~~~Clickable Button~~~~~~
</div>
<div id="comments" class="comments-area">
                                     ~~~~PHP code calling WP comments~~~
</div>

jQuery

    jQuery(document).ready(function($) {
       $('.comments-area').hide();

           $('.commenttoggle').click(function() {
             $('.comments-area').toggle();
           });
       });

上記のコードは機能しますが、1 つの投稿の下にある [コメントを表示] ボタンをクリックすると、すべてのコメント セクションが表示されます。私はjQuery APIとここでstackoverflowを見てきましたが、クリックイベントに最も近い要素のみを切り替えることについてのアドバイスを見つけることができないようです.

私は .closest & .parent を試しましたが、うまくいかないようです。jQueryを始めたばかりなので、いくつかのコードだけでなく説明もいただければ幸いです。

4

2 に答える 2

2

それぞれpopcomを使用して同じクラスの要素を反復処理し、クリックした要素をターゲットに適用する必要があります$(this)

$('.popcom').each(function() {
    $(this).click(function() {
        // Your script here              
    });
})

注：.popcomショーコメントボタンのクラスです

于 2013-04-07T05:41:17.663 に答える
2

これはあなたが望むことをするはずです:

jQuery(document).ready(function($) {
    $('.comments-area').hide();
    $('.commenttoggle p').click(function() {
        $(this).closest("div").next('.comments-area').toggle();
    });
});
于 2013-04-07T06:02:11.457 に答える