jQuery итерация некоторого div

Question

У меня есть HTML:

<div class="box">
    <input name="radio-1" value="1" type="radio" class="radio">
    <div class="hidden_box">
    some content
    </div>
</div>

<div class="box">
    <input name="radio-2" value="1" type="radio" class="radio">
    <div class="hidden_box">
    some content
    </div>
</div>

.... и т. Д.

Когда я нажимаю переключатель, мне нужно, чтобы «hidden_box» был виден в этом «поле» div. Как я могу это сделать?

Пожалуйста, помогите.

Answer 1

Поскольку вы пометили свой Q с помощью jQuery, я буду использовать это:

$('.radio').click(function(){
    $(this).parent().find('.hidden_box').show();
});

См. Рабочий пример .

ОБНОВЛЕНИЕ: Если вы хотите применить этоко всем настоящим и будущим элементам .box используйте:

$('.radio').live('click', function(){
        $(this).parent().find('.hidden_box').show();
});

Answer 2

Использование jQuery:

$('.box input').click(function(){
   $(this).next('.hidden_box').toggle();
});

Пример в реальном времени: http://jsfiddle.net/ZmRdg/

Answer 3

$('.radio').click(function(i,v){
  $(this).next('.hidden_box').toggle();
});

Answer 4

$('.radio').click(function(){
     $('.hidden_box', $(this).parent()).show();
})

Будет работать, даже если hidden_box не является следующим элементом DOM.Вторым параметром в селекторе jquery является область действия.

ОБНОВЛЕНИЕ: использование find (), как показано в других разделах ответов, выглядит мне чище

Answer 5

$(".radio") //select the radio buttons
           .click( function() { //Assign a click handler
               $(this).next().show(); //Get the element that comes after this one and make it visible
           });