javascript - 使用切换选择新的 rado 按钮时隐藏 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 都少于要显示的索引值，因此它显示的是那个和所有以前的。而只是用于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.
      });
    });

小提琴