Mam tak jak:

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

Chcę ujawnić treść, gdy pole wyboru zostanie kliknięte. Oto JS:

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

Dlaczego tak działa?

PS: Nie chcę używać identyfikatorów. Chcę, aby to być dynamicznie przypisane, ponieważ mam wiele pola wyboru.

0
user2914191 29 listopad 2013, 06:44

4 odpowiedzi

Najlepsza odpowiedź

To drugi następny rodzeństwo z tego, co widzę

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

Demo: Fiddle

Innym sposobem jest (jeśli nie jesteś pewien elementów między pola wyboru a ukrytym)

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

Demo: Fiddle

1
Arun P Johny 29 listopad 2013, 02:52
$('.chk-class').change(function(){
    $(this).next('.hidden').toggle();
});
0
splakard nanards 29 listopad 2013, 02:55

Najpierw powinieneś ukryć swój hidden div z wyświetlaczem: Brak

.hidden {
    display: none;
}

Następnie

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

http://jsfiddle.net/e5jvg/

0
Roney Michael 29 listopad 2013, 03:30

Najbliższe ruchy do góry użycie next

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

Edytuj Użyj nextAll('selector:first'), aby pokazać tylko następny element z określonym {x1}}

$(this).nextAll('.hidden:first').show()
0
Udit Bhardwaj 29 listopad 2013, 02:51