не может показать элемент рядом с флажком

Question

0

У меня такой HTML:

<input type="checkbox" class="chk-class" /> Click to enable<br/>
<div class="hidden">Hidden content here</div>

Я хочу показать содержимое при щелчке по галочке. Итак, здесь JS:

$('.chk-class').bind('click', function(){
    $(this).closest('.hidden').show();
});

Почему это не работает?

PS: Я не хочу использовать идентификаторы. Я хочу, чтобы это было динамически назначено, поскольку у меня есть несколько флажков.

Arun P Johny 29 нояб. 2013, в 03:49

Теги:

4 ответа

0

$('.chk-class').change(function(){
    $(this).next('.hidden').toggle();
});

splakard nanards 29 нояб. 2013, в 01:42

0

ближайшие шаги вверх используют next

$(this).next().show();

EDIT используйте nextAll('selector:first') чтобы отобразить только следующий элемент с определенным class/id etc

$(this).nextAll('.hidden:first').show()

UDB 29 нояб. 2013, в 00:41

0

есть текст и <br/> между флажком и div. я хочу иметь возможность просто найти следующий элемент по имени класса "скрытый"
user2914191 29 нояб. 2013, в 02:47
1

@ user2914191 вам нужно поделиться правильной разметкой, если вы хотите решение
Arun P Johny 29 нояб. 2013, в 02:48
0

@ user2914191 я отредактировал свой ответ согласно вашему требованию
UDB 29 нояб. 2013, в 02:52
0

nextAll с selector:first работал для меня, спасибо
user2914191 29 нояб. 2013, в 02:58

Показать ещё 2 комментария

0

Сначала вы должны скрыть свой hidden div с отображением: none

.hidden {
    display: none;
}

тогда

$(".chk-class").click(function(){
    $(".hidden").css("display","block");
});

Orlo 29 нояб. 2013, в 00:07

есть текст и <br/> между флажком и div. я хочу иметь возможность просто найти следующий элемент по имени класса "скрытый"
@ user2914191 вам нужно поделиться правильной разметкой, если вы хотите решение
@ user2914191 я отредактировал свой ответ согласно вашему требованию
nextAll с selector:first работал для меня, спасибо

Arun P Johny · Accepted Answer · 2013-11-29T01-25-00.000Z

Это второй следующий брат из того, что я вижу

$('.chk-class').on('change', function(){
    $(this).next().next().toggle();
});

Другой способ (если вы не уверены в элементах между флажком и скрытым)

$('.chk-class').on('change', function () {
    $(this).nextUntil('.hidden').last().next().toggle();
});