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').on('change',function(){
    var val = $(this).val();
    $('div.gSet').hide();
    $("div.gSet:lt("+val+")").show();
});

工作演示 - ＆gt; http://jsfiddle.net/mohammadAdil/uS7SA/1/

Answer 2

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

Fiddle For you..

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

2 个答案: