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>

....等等

当我点击单选按钮时，我需要在这个“box”div中显示“hidden_box”。我该怎么办？

请帮助。

Answer 1

由于您使用jQuery标记了Q，我将使用它：

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

见工作example。

更新：如果您要将其应用于所有现在和将来的'.box'项目，请使用：

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

Answer 2

$(".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
           });

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

使用jQuery：

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

实例：http://jsfiddle.net/ZmRdg/

jQuery迭代一些div

5 个答案: