jquery - jQuery选择下一个最近的类

Question

我有一个简单的常见问题列表

<div class='qcontainer'>
    <p>Q:</p>
    <div class='question'>Question</div>
</div>
<div class='acontainer'>
    <p>A:</p>
    <div class='answer'><p>Answer</p></div>
</div>
<div class='qcontainer'>
    <p>Q:</p>
    <div class='question'>Question</div>
</div>
<div class='acontainer'>
    <p>A:</p>
    <div class='answer'><p>Answer</p></div>
</div>

我要做的就是在单击问题时切换下一个回答者的可见状态。

到目前为止，我得到了

   $('.qcontainer').bind("click", function (e) {
        $('.qcontainer').next('.acontainer').toggle(400);
    });

但这会切换所有项目，我想做的只是针对点击的问题的答案。所以从单击的对象列表中的下一个项目。

Answer 1

尝试如下，

$('.qcontainer').bind("click", function (e) {
    $(this).next().toggle(400);
});

对于您拥有的标记，.nextof qcontainerisacontainer等您可以简单地使用.next来切换acontainer而不用担心任何事情:)

Answer 2

$('.qcontainer').bind("click", function (e) {
        $('.acontainer:visible').hide(0);
        $(this).nextAll('.acontainer').show(400);
    });

Answer 3

看起来你很接近！

$('.qcontainer').bind("click", function () {
    $(this).next('.acontainer').toggle(400);
});

Answer 4

试试这个，告诉我它是否有效。在答案 DIV 中，您有一个未封闭的“DIV”。

    <div class='qcontainer'>
        <p>Q:1</p>
        <div class='question'>Question</div>
    </div>
    <div class='acontainer'>
        <p>A:</p>
        <div class='answer'><p>Answer</p></div>
    </div>
    <div class='qcontainer'>
        <p>Q:2</p>
        <div class='question'>Question</div>
    </div>
    <div class='acontainer'>
        <p>A:</p>
        <div class='answer'><p>Answer</p></div>
    </div>