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를 하나의 specicif 항목 ocmments에 후크하도록 js를 제어 할 필요가 있고 그것을 할 수 있습니까 id?

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

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

작동 하나의 항목 만 있다면하지만 여러 경우가 깨진다는 :

JS는 기압 같은 것입니다/

이 .. 난 그냥에 그것을 얻을 매우 간단 해달라고 내 실제로 작업을 수행하는 방법을 머리 : 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'); 
});