jquery - 根据使用单选按钮选择的数字显示 div

Question

我有 4 个 div 需要显示与所选单选按钮旁边的数字相称。所以如果我点击 1 那么只有 div #1 显示。如果我选择 3，那么 div 的 1 到 3 显示。我在这个网站上看到了显示或隐藏 div 或元素的解决方案。我还没有找到任何可以让您从“id”中选择一个数字然后显示该数量的 div 的东西。

我的 HTML 很简单：

<input type="radio" name="sNum" value="1"><span>1</span>
<input type="radio" name="sNum" value="2"><span>2</span>
<input type="radio" name="sNum" value="3"><span>3</span>
<input type="radio" name="sNum" value="4"><span>4</span>
<br />
<div id="g1" class="gSet">
  content here
</div>
<div id="g2" class="gSet">
  content here
</div>
<div id="g3" class="gSet">
  content here
</div>
<div id="g4" class="gSet">
  content here
</div>

我只是不确定如何去做这件事，欢迎任何建议，而不是我根据我所知道的做一个 kludge。我知道我需要获取所选输入的值并将其与相应的 ID 匹配

Answer 1

$('input:radio').on('change',function(){
    $('#g'+$(this).val()).show().siblings('div').hide();
});

小提琴为你..

Answer 2

尝试这个 -

$('input').on('change',function(){
    var val = $(this).val();
    $('div.gSet').hide();
    $("div.gSet:lt("+val+")").show();
});

工作演示 --> http://jsfiddle.net/mohammadAdil/uS7SA/1/