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

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>

我想要的是相应单选按钮的 div 可见并关闭任何其他可能打开的单选按钮。

Answer 1

那是因为您正在使用lt，所以您应该使用eq。试试这个。

使用lt，您将获得所有小于要显示的索引值的div，因此它会显示该div以及所有之前的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.
      });
    });

Fiddle