Показать дочерние флажки при нажатии родительского флажка

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>

im, используя следующий код jQuery:

$ (документ) .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() ищет потомков элементов в вашем выборе.Вам не следует искать братьев и сестер родительского элемента , например,

. Примечание общего характера: при построении древовидной структуры возникает классическая ошибка HTML - эмуляция смещения по левому краю с отступом / полем.Правильный способ сделать это - поместить .audience в .audience-group , как в , тогда это станет намного более управляемым.