Question

我有一组受众群体，其受众群体下隐藏了复选框。现在，我想在点击观众组名称时显示这些隐藏的复选框。

您可以在此处查看更多代码：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代码：

$（document）.ready（function（）{

$( '.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 置于<{1}} like so内，然后它变得更易于管理。

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

2 个答案: