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/