Question

我有一些带有数字值的单选按钮，代表当我选择一个或另一个按钮时应该呈现的元素数量。他们是：

<input type="radio" id="one" class="render-input" name="renderVal" value="1" />
<input type="radio" id="two" class="render-input" name="renderVal" value="2" />
<input type="radio" id="three" class="render-input" name="renderVal" value="3" />
<input type="radio" id="four" class="render-input" name="renderVal" value="4" />

例如，我有一个<div></div>，它应该呈现与检查输入值相对应的次数。例如，如果我检查input#one，我应该呈现<div></div>。如果我选中input#two，则必须有<div></div> <div></div>，依此类推。因此，如果我检查了例如input#three并且渲染了三个<div></div> s，然后检查具有较小值的输入（即1或2），它应该显示这个数量的elemets，而不是将新内容添加到现有内容中。我试着像这样做

$('.render-input').change(function () {
    for (var i = 1; i <= $(this).val(); i++)
        $(this).append('<div></div>');
});

但是，如果选中值较小的输入，则减少渲染元素数量的唯一方法是删除所有元素并再次渲染它们，这似乎不是一种正确的方法。那。我怎么能做到这一点？

Answer 1

您的主要问题是，您尝试将div附加到input，这是不可能的。指定一个包含元素并将它们附加在那里会更有意义。另请注意，您应该将所选单选的值解析为整数。试试这个：

＆＃13;

$('.render-input').change(function() {
  var html = '';
  for (var i = 0; i < parseInt(this.value, 10); i++) {
    html += '<div></div>';
  }
  $('#container').html(html);
});

＆＃13;

#container div { 
  width: 15px;
  height: 15px;
  border: 1px solid #c00;
  display: inline-block; 
  margin-right: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" id="one" class="render-input" name="renderVal" value="1" />
<input type="radio" id="two" class="render-input" name="renderVal" value="2" />
<input type="radio" id="three" class="render-input" name="renderVal" value="3" />
<input type="radio" id="four" class="render-input" name="renderVal" value="4" />

<div id="container"></div>

＆＃13;

Answer 2

试试这个代码段

<input type="radio" id="one" class="render-input" name="renderVal" value="1" />
<input type="radio" id="two" class="render-input" name="renderVal" value="2" />
<input type="radio" id="three" class="render-input" name="renderVal" value="3" />
<input type="radio" id="four" class="render-input" name="renderVal" value="4" />
 <span id="output"></span>

$('.render-input').change(function () {
var val="";
for (var i = 1; i <= $(this).val(); i++)
    val+='<div>Hi</div>';
$("#output").html(val);  

});

在此处检查其输出https://jsfiddle.net/11Lrwtue/

根据选中的单选按钮

2 个答案: