如何使用JQuery为下一个元素切换类，而不是一次性

Question

我写了一些jQuery来改变某些元素的可见性，但所有元素的可见性立刻被改变了。我只想将更改应用于下一个元素。我尝试使用.next()，但它没有用。

HTML：

<span class="close_button">x <div class="comment_report">Click!</div></span><br>
<span class="close_button">x <div class="comment_report">Click!</div></span><br>

CSS：

.comment_report{
    visibility:hidden;
}
.visible{
    visibility:visible;
}

JS：

$(document).ready(function() {
    $(".close_button").click(function() {
        $(".comment_report").toggleClass("visible");
    });
});

这是我的演示http://jsfiddle.net/6hahA/

Answer 1

只需使用children（）即可。由于div是跨度的孩子。

$(document).ready(function() 
{
    $(".close_button").click(function() 
    {
        $(this).children(".comment_report").toggleClass("visible");
    });
});

http://jsfiddle.net/leetaylor/6hahA/1/

Answer 2

由于课程<div>的{​​{1}}是孩子，所以您需要做的就是

.comment-report

fiddle

Answer 3

您可以使用.find或.children来选择匹配元素：

 $(document).ready(function() {
        $(".close_button").click(function() {
            $(this).find('.comment_report').toggleClass("visible");
        });
    });

Answer 4

李是正确的 - 将第3行改为......

        $(this).children(".comment_report").toggleClass("visible");

更新小提琴：http://jsfiddle.net/6hahA/5/