使用jQuery切换类

Question

当用户点击链接时，我需要隐藏一个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

默认情况下，评论是隐藏的（因此有“hidden”类）。现在，如果用户点击“显示/隐藏评论”链接，则应该显示或隐藏该特定项目的评论，具体取决于它们是否可见。现在的问题是，我是否需要一些id来控制js，仅将其钩子连接到该特定项目的评论，并且我可以不使用id来完成吗？

js大致如下：

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

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

如果只有一个项目有效，但如果有多个，则会中断:/ 这很简单...我只是不明白如何实际执行它:D

- user1069269

---

我在这里找不到代码的任何问题，它在这里运行良好：http://jsfiddle.net/qMAWP/4/ - Sal

Answer 1

http://jsfiddle.net/uB9Fb/

尝试使用此JS代码：

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

- Zoltan Toth

Answer 2

如果您保留每篇帖子的当前结构，则最短的方法是：

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

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

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

同时请注意，自jQuery 1.7起，应使用.on()函数来绑定事件，即使旧的函数仍然可用。

- Zut

Answer 3

我会像下面这样做。

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

如果你有更多的评论，可以使用以下内容。

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

- Ehtesham