对于数字输入的循环相关

Question

我正在尝试重复一个div，其次数取决于数字输入字段中选择的数字，但是当前输入的数字输入时，这些值正在相乘。因此，如果你从2变为3，它会重复div而不是3次。如何重置循环以便仅使用当前数字？

http://jsfiddle.net/deliciouslycheesy/6rb94mry/

{{1}}

Answer 1

您需要删除之前添加的内容：

＆＃13;

＆＃13;

$('#numRepeat').bind('change keyup input', function () {
	var el = $(".repeat-me").get(0);
  $(".repeat-me:not(:first)").remove();
	var numRepeat = $("#numRepeat").val();
  
  for(var i = 1;i < numRepeat;i++){    
    var newEl = $(el).after(el.cloneNode(true));   
	}
}).change();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="numRepeat" value="2"/>
<div class="repeat-me">REPEAT</div>

＆＃13;

＆＃13;

＆＃13;

JSFiddle

Answer 2

我不确定您为什么要使用三个事件change keyup input，只有input事件会检测input字段内的更改，请检查 {{ 3}}

我建议将重复div的模型与结果分开，我认为这会使代码更清晰，并且因为您使用JQuery，您可以将cloneNode()替换为{{1} }}

希望这有帮助。

＆＃13;

＆＃13;

clone()

＆＃13;

$('#numRepeat').on('input', function () {
    var el = $("#model-div .repeat-me");
    var numRepeat = $(this).val();
  
    $('#result-div').empty(); //Clear the result div
    
    for(var i = 0 ; i < numRepeat ; i++)
    {    
       $('#result-div').append( $(el).clone(true) );
    }
})

＆＃13;

#model-div{
    display: none;
}

＆＃13;

＆＃13;

＆＃13;