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

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

js就像atm：

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

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

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

这很简单..我实在不知道如何做到这一点：D

Answer 1

http://jsfiddle.net/uB9Fb/

试试这个JS：

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

Answer 2

如果保留每个帖子的当前结构，最简单的方法是

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

但更普遍的方式就像你在暗示

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

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

Answer 3

我会这样做

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

如果您有更多评论，可以使用以下

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

使用jQuery切换类

3 个答案: