Question

我有多组是/否单选按钮，根据无线电值隐藏或显示div。如何仅将CLOSEST div选择为更改的单选按钮组？

这可行，但会更改页面上的所有div而不是最近的。

$('.hide-show input').change(function() {
  $('.hide-show-yes').toggle(this.value == 'yes');
  $('.hide-show-no').toggle(this.value == 'no');
});
$('.hide-show input:checked').change(); //trigger correct state onload

当页面上有多个集合时，如何仅影响到收音机的最近div？

$('.hide-show input').change(function() {
  $(this).next('.hide-show-yes').toggle(this.value == 'yes').next('hide-show-no').toggle(this.value == 'no');
});
$('.hide-show input:checked').change(); //trigger correct state onload

Answer 1

您需要访问单选按钮的父div的下一个元素，您可以这样做

<强> Live Demo

$('.hide-show input').change(function() {
  $(this).closest('div').next('.hide-show-yes').toggle(this.value == 'yes');
  $(this).closest('div').next('.hide-show-no').toggle(this.value == 'no');
});
$('.hide-show input:checked').change(); //trigger correct state onload

Answer 2

为您的输入字段指定ID，您可以控制ID，以便您可以执行类似

的操作

$('#radioButtonOne').change(function() {

和

$('#radioButtonTwo').change(function() {

通过这种方式，您始终可以确定知道要更改的内容，并且您可以执行与更改相对应的不同功能。

我还建议每个州只有一个div，所以你改变div的文本而不是隐藏和显示多个div。

我还建议使用on jquery函数，以便您可以更改DOM，但仍然可以收听您可能创建的新元素。

 $("#radioButtonOne").on("change", function(event){

Answer 3

$('.hide-show input').change(function() {    
  $(this).parent().next().toggle(this.value == 'yes');
  $(this).parent().next().next().toggle(this.value == 'no');
});
$('.hide-show input:checked').change(); //trigger correct state onload

JSFIDDLE

隐藏/显示最近的类

3 个答案: