单击父复选框时显示子复选框

Question

我有一组观众，它们的复选框隐藏在它的观众组下面。现在，我想在单击访问组名称时显示这些隐藏的复选框。

您可以在这里查看更多的im代码：http://jsfiddle.net/CnmEA/

我有以下示例html代码：

<div class='audience-group'>
    <input type='checkbox' class='audience-group-checkbox' value='9' />
    <div class='audience-group-name'>
        JGG Enterprises
    </div>
</div>
<div class='audience'>
    <input type='checkbox' class='audience-checkbox' value='7' />
    <div class='audience-name'>
        Mucho, George
    </div>
</div>
<div class='audience'>
    <input type='checkbox' class='audience-checkbox' value='9' />
    <div class='audience-name'>
        Bo, Jen
    </div>
</div>
<div class='audience'>
    <input type='checkbox' class='audience-checkbox' value='10' />
    <div class='audience-name'>
        Gin, Junto
    </div>
</div>
<div class='audience'>
    <input type='checkbox' class='audience-checkbox' value='12' />
    <div class='audience-name'>
        Molina, Greg
    </div>
</div>
<div class='audience'>
    <input type='checkbox' class='audience-checkbox' value='36' />
    <div class='audience-name'>
        Berkely, Dada
    </div>
</div>
<div class='audience-group'>
    <input type='checkbox' class='audience-group-checkbox' value='8' />
    <div class='audience-group-name'>
        GBA Inc.
    </div>
</div>
<div class='audience'>
    <input type='checkbox' class='audience-checkbox' value='1' />
    <div class='audience-name'>
        Kapate, Jones
    </div>
</div>
<div class='audience'>
    <input type='checkbox' class='audience-checkbox' value='2' />
    <div class='audience-name'>
        Bingo, Gringo
    </div>
</div>
<div class='audience'>
    <input type='checkbox' class='audience-checkbox' value='4' />
    <div class='audience-name'>
        Doe, John
    </div>
</div>
<div class='audience'>
    <input type='checkbox' class='audience-checkbox' value='8' />
    <div class='audience-name'>
        Merio, Horhe
    </div>
</div>
<div class='audience'>
    <input type='checkbox' class='audience-checkbox' value='35' />
    <div class='audience-name'>
        Dalisay, JM
    </div>
</div>

我正在使用下面的jQuery代码：

$(文档)函数(.ready(){

$( '.audience-group-name' ).each(function(){

    $(this).click(function(){

        $(this).find('.audience').show();
    });
});    

})；

我对jQuery还不太熟悉，谢谢你的帮助！

Answer 1

下面是一个有效的示例：http://jsfiddle.net/CnmEA/5/

修改后的JS：

$('.audience-group-name').click(function() {
       $(this).parent().nextUntil('.audience-group').show();
});

你的JS的主要问题是$(this).find('.audience').show()。jQuery find()方法查找调用该方法的jQuery对象的子代。在本例中，该对象是$(this)，它引用一个具有.audience-group-name类元素。但是，要显示的元素不是该元素的后代。您需要上一级(.parent())，然后选择所有下一个元素，直到到达具有类.audience-group的下一个元素。

您还会注意到，我从您的代码中删除了.each()方法。当您将click事件绑定到$('.audience-group-name')时，它将绑定到具有该类的任何元素。当单击其中一个元素时，它将找到要显示的正确元素，因为$(this)将提供正确的上下文。它提供了被单击的实际元素，因此DOM遍历方法.parent().nextUntil(...)将找到正确的元素。

Answer 2

find()函数查找所选元素的子。您应该寻找父like so的同级

作为一般的设计注意事项:在构建树结构时，您会犯一个典型的HTML错误--使用填充/边距模拟左偏移。正确的做法是将.audience 放在 .audience-group like so中，这样它就变得更易于管理。