使用 jQuery 切换类答案

【问题标题】：Toggle class with jQuery使用 jQuery 切换类
【发布时间】：2011-11-28 20:12:08
【问题描述】：

当用户点击链接时，我需要隐藏一个 div。

html 是这样的：

<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

默认情况下，cmets 是隐藏的（因此类隐藏在那里）。现在，如果用户单击显示/隐藏 cmets 链接，它应该显示或隐藏该特定项目的 cmets，具体取决于它们是否可见。现在的问题是我是否需要一些 id 来控制 js 只挂钩到那个特定的项目 ocmments，我可以用 id 来做吗？

js 类似于 atm:

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

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

如果只有一个项目有效，但如果有多个项目，它就会分解：/

这很简单..我只是不知道该怎么做：D

【问题讨论】：

我找不到代码有什么问题，在这里可以正常工作：jsfiddle.net/qMAWP/4

标签： jquery show-hide

【解决方案1】：

http://jsfiddle.net/uB9Fb/

试试这个 JS：

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

【讨论】：

【解决方案2】：

如果你保持每个帖子的当前结构，那么最短的方法是

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

但更一般的方式就像你建议的那样

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

另外请注意，您应该使用 .on() 函数来绑定 jQuery 1.7 起的事件，即使旧的函数仍然有效。

【讨论】：

【解决方案3】：

我会像下面那样做

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

如果你有更多的 cmets，你可以使用以下

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

【讨论】：