JQuery ближайшая функция

Question

Хорошо, я знаю, что .closest () уже обсуждался ранее, но я искал, и до сих пор не могу заставить его работать.

Ситуация такова.У меня есть таблица с некоторыми флажками и ярлыками.Теперь, когда флажок установлен, я хочу, чтобы div отображался и исчезал, когда не отмечен.Имейте в виду, что это динамический PHP-код.

Я до сих пор работал, но текущая проблема заключается в том, что все div-ы сообщения появляются вместо только соответствующего.

$('[name^="check"]').click(function() {
    $(".message").toggle(this.checked);
});

Теперь у флажков есть имена, такие как check1, check2 и check3.Вопрос о том, сколько их сгенерировано.

Я пытался поиграть с разными функциями this (), parent () и closest (), пытаясь выбрать только один из элементов div, но я не могу 'не получается.

Спасибо за ваше внимание.

Редактировать:

Отрисованный HTML выглядит примерно так (упрощенно)

<div style="float: left;">
<input type="checkbox" id="check1" name="check1" value="1"><label for="check1">Label for check1</label></div>
<div class="message" style="display: none; ">FOO</div>

<div style="float: left;">
<input type="checkbox" id="check2" name="check2" value="2"><label for="check2">Label for check2</label></div>
<div class="message" style="display: none; ">FOO</div>

Answer 1

closest(), parent() и все варианты будут работать только в том случае, если флажок находится внутри div.

$('[name^="check"]').click(function() {
    $(this).parent().next(".message").toggle(this.checked);
});

При этом следует избегать массового добавления обработчиков событий.Лучше использовать делегат

$('#table_id').delegate('[name^="check"]', function() { ... });

. При таком подходе добавляется только один прослушиватель событий, а не для каждого флажка.

Answer 2

Это должно работать для вас с предоставленной разметкой.

$('[name^="check"]').click(function() {
    $(this).parent().next(".message").toggle(this.checked);
});

Боковой узел: вы можете улучшить производительность своего селектора, используя input[name^="check"], поэтому jQuery не нужно будет повторятьчерез все элементов.

Пример кода для jsfiddle .

Answer 3

$('[name^="check"]').click(function() {
    $(this).parent().children("div.message").toggle(this.checked);
});

При условии, что у вашего div и вашего флажка один и тот же родитель.