jQueryでクラスを切り替える

Question

ユーザーがリンクをクリックしたときにdivを非表示にする必要があります。コメントが隠されているデフォルトとして

<div class="item"> 
<div class="entry"> 
Lorem ipsum 
</div> 
<a href="#" class="commentsToggle">Show/hide comments</a> 
<div class="comments hidden"> 
This comments div I want show/hide 
</div> 
</div> 

<div class="item"> 
<div class="entry"> 
Lorem ipsum 
</div> 
<a href="#" class="commentsToggle">Show/hide comments</a> 
<div class="comments hidden"> 
This comments div I want show/hide 
</div> 
</div> 

....there's multiple items after this 

（したがって、クラスが非表示）：

HTMLは次のようなものです。ユーザーが[コメントを表示/非表示]リンクをクリックすると、表示されているかどうかに応じて、その特定のアイテムのコメントが表示または非表示になります。今問題は、私はいくつかのidを必要とするのは、その1つのspecicif項目にのみフックするjsを制御するocmmentsと私はそれをwitouh idを行うことができますか？動作しますが、複数の場合、それは壊すだけつの項目がある場合

$('.item .commentsToggle').click(function(){ 
     elem = $(this).parents('.item'); 

     $(elem).find('.comments').each(function() { 
      $(this).toggleClass('hidden'); 
     }); 
    }); 

：

JSがATMのようなものです/

これは非常に簡単です..私はちょうど私にそれを得るいけません実際にそれを行うにはどのようにヘッド：D

Answer 1

あなたは、各ポストの現在の構造を維持した場合は、それを行うための最短の方法は、

$('.item .commentsToggle').click(function(){ 
    $(this).next().toggleClass('hidden'); 
}); 

です

しかし、あなたは

$('.item .commentsToggle').click(function(){ 
    $(this).closest('.item').find('.comments').toggleClass('hidden'); 
}); 

を示唆しているように、より一般的な方法はまた、古い関数はまだ動作していても、jQueryの1.7のようなイベントをバインドする.on()機能を使用する必要があることに注意しています。

Answer 2

私は

$('.item .commentsToggle').click(function(){ 
     $(this).next('.comments').toggleClass('hidden'); 
    }); 

を次のようにそれを行うだろうし、あなたがより多くのコメントがある場合は、次の

$('.item .commentsToggle').click(function(){ 
     $(this).closest('.item').children('.comments').toggleClass('hidden'); 
    }); 

Answer 3

http://jsfiddle.net/uB9Fb/

が、これはJS試す使用することができます。

$('.commentsToggle').click(function(){ 
     $(this).siblings(".comments").toggleClass('hidden'); 
});