Question

当我点击一个单选按钮时，如果它是列表中的最后一个，它会显示所有隐藏的div，并且当我选择另一个单选按钮时不会关闭所有打开的div。我知道我很接近......但是错过了一些东西。

    $(document).ready(function() {
      $('input').on('change',function(){
      $(".groupNumber").hide().filter(":lt(" + this.value + ")").slideToggle("slow");
      });
    });

我以为我是通过在链子的开头“隐藏”来照顾它的。

HTML

<table cellpadding="0" cellspacing="0">
<tr>
<td width="25"><input type="radio" name="rNumber" value="1"></td>
<td width="25"><input type="radio" name="rNumber" value="2"></td>
<td width="25"><input type="radio" name="rNumber" value="3"></td>
</tr>
</table>

div如下：

<div id="grp1" class="groupNumber">Content Here</div>
<div id="grp2" class="groupNumber">Content Here</div>
<div id="grp3" class="groupNumber">Content Here</div>

我想要的是相应的radiobutton的div可见，并关闭任何可能打开的其他。

Answer 1

这是因为你正在使用lt，你应该使用eq。试试这个。

使用lt，你得到的所有div都少于要显示的索引值，因此它显示的是一个和所有以前的。而只是使用eq来从集合中显示div。

$(document).ready(function() {
      $('input').on('change',function(){
       $(".groupNumber").hide().eq((+this.value -1)).slideToggle("slow");//Probably Slide toggle probably doesn't make sense here as change event won't be triggered if you select the same option again.
      });
    });

使用切换选择新的单选按钮时隐藏div

HTML

1 个答案:

Fiddle