0

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

<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();
});

问题是，通过单击链接，.comment所有评论都隐藏/出现的 div 表单，有没有办法让来自同一帖子的评论切换效果，而不是来自所有帖子的评论？

编辑：使用 .toggleComments 行更新

4

5 回答 5

0

尝试：

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

更新以反映 OP 的更新 html。

于 2012-04-11T23:38:58.893 回答
0

假设在您想要切换评论.toggleComments的同一内部，您会找到父级，然后在其中找到要切换的适当评论：.post.post

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

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

于 2012-04-11T23:42:51.890 回答
0

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

$('.toggleComments').click(function(){
    var thisParent = $(this).parents('.post');
    thisParent.find('.comment').toggle();
});​
于 2012-04-11T23:43:10.480 回答
0

演示 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();
});
于 2012-04-11T23:43:41.000 回答
0

发生这种情况是因为您所有的“.comment”和“.toggleComments”都是同一个选择器。

如果您将这些更改为唯一的，它们将起作用。IE：

<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

于 2012-04-11T23:44:46.077 回答