从不同的 div 问题切换类

Question

所以我有一个页面显示多个包含"评论"的"帖子"。我的代码：

<div class="post">
    This is a post
    <span class="toggleComments">Hide/Show Comments</span>
    <div class="comment">This is a comment</div>
</div>
<div class="post">
    This is another post
    <span class="toggleComments">Hide/Show Comments</span>
    <div class="comment">This is another comment</div>
    <div class="comment">This is a third comment</div>
</div>

所以这是我的问题：我有一个跨度，其中包含的类toggleComments"切换"注释div。我通过以下方式实现了这一目标：

$('.toggleComments').click(function(){
    $('.comment').toggle();
});

问题是，通过单击链接，所有评论都会隐藏/显示.commentdiv表单，有没有办法使来自同一帖子的评论切换效果，而不是所有帖子的评论？

编辑：使用.toggleComments行更新

Answer 1

假设.toggleComments位于您要切换注释的同一.post内，您将找到父.post，然后在其中找到要切换的相应注释：

$('.toggleComments').click(function(){
    $(this).closest(".post").find(".comment").toggle();
});

从其他答案中可以看出，有许多方法可以在包含div 的同一对象中查找.comment对象。 这样做而不是引用同级姐妹的好处是，即使将来对HTML的布局进行了一些调整，它也会在公共.post父级中的任何位置找到它们。 我更喜欢使这种类型的代码尽可能健壮，以抵御未来的HTML调整，只要它不损害任何重要的东西。

Answer 2

DEMO JSBIN

如果您有类似以下内容：

<div class="post">
    This is a post
    <div class="toggleComments">SHOW COMMENTS</div>
    <div class="comment">This is a comment</div>
</div>

。比这应该有帮助。

$('.toggleComments').click(function(){
    $(this).nextAll('.comment').toggle();
});

Answer 3

尝试：

$('.toggleComments').click(function(){
    $(this).siblings('.comment').toggle();
});

更新

以反映OP更新的html。

Answer 4

发生这种情况

是因为您的所有".comment"和".toggleComments"都是相同的选择器。

如果将它们更改为唯一，它们将起作用。 即：

<div class="post-1">
    This is a post
    <a class="toggle-1">Toggle Comments</a>
    <div class="comment-1">This is a comment</div>
</div>
<div class="post-2">
    This is a post
    <a class="toggle-2">Toggle Comments</a>
    <div class="comment-2">This is a comment</div>
</div>
$('.toggle-1').click(function(){
    $('.comment-1').toggle();
});
$('.toggle-2').click(function(){
    $('.comment-2').toggle();
});

这是 jsfiddle http://jsfiddle.net/Uh9hJ/

编辑：顺便说一句，使用兄弟姐妹是一个更好的选择，这家伙说得对：https://stackoverflow.com/a/10115482/864488

Answer 5

我认为你应该做这样的事情。在这里演示

$('.toggleComments').click(function(){
    var thisParent = $(this).parents('.post');
    thisParent.find('.comment').toggle();
});​