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

既然你标记与jQuery你的Q，我将使用：

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

见工作example。

UPDATE：如果你想这适用于所有现在和未来 '.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/