Question

我想尝试根据另一个输入乘以输入文本。例如，如果我输入值3，它将显示3个输入文本，或者如果我输入4，则将显示4个输入文本。但是我的问题是，每次更改输入值时，它都不会重置但仍会添加输入。
这是我在jquery上的代码：

$("#numcolor").bind("keyup change", function(e) {
  var num = parseInt($('#numcolor').val(), 10);
  if (!isNaN(num)) {
    var $div = $('#colorinput');
    for (var i = 0; i < num; i++) {
      $div.append('<input type="text" class="colortext" />');
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
# input:<input id="numcolor">
<div id="colorinput"></div>

$("#numcolor").bind("keyup change", function(e) {
  var num = parseInt($('#numcolor').val(), 10);
  if (!isNaN(num)) {
    var $div = $('#colorinput');
    for (var i = 0; i < num; i++) {
      $div.append('<input type="text" class="colortext" />');
    }
  }
});

这是我在http://jsfiddle.net/xmzopnLa/上的演示

Answer 1

只需在再次调用循环之前将$ div元素内的HTML内容重置为（“”），即可，如下所示：

$( "#numcolor" ).bind("keyup change", function(e) {
	var num = parseInt($('#numcolor').val(), 10);
	if (!isNaN(num)){
		var $div = $('#colorinput');
    $div.html("");
		for(var i=0;i< num;i++) {
			$div.append('<input type="text" class="colortext" />');
		}
	}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Enter Number of inputs :
<input id="numcolor" type="text" />
<div id="colorinput"></div>

现在请记住，这将删除输入字段并以指定的数量重新应用它们，因此请谨慎。您可以隐藏或使输入字段不可编辑。

Answer 2

您将在每个事件上添加新的输入。您必须在添加输入之前清除容器：

   $("#numcolor").bind("keyup change", function(e) {
       var num = parseInt($('#numcolor').val(), 10);
       if (!isNaN(num)) {
           var $div = $('#colorinput');
           $div.empty(); // clear container
           for (var i = 0; i < num; i++) {
               $div.append('<input type="text" class="colortext" />');
           }
       }
   });

Answer 3

如果您想保存以前输入的值，只需检查它是否存在，然后在其余输入后删除：

$( "#numcolor" ).bind("keyup change", function(e) {
  var num = parseInt($('#numcolor').val(), 10);
  if (!isNaN(num)){
    var $div = $('#colorinput');

    for(var i=0;i< num;i++) {
      if(!$(".colortext")[i]) $div.append('<input type="text" class="colortext" />');
    }
    var temp=$(".colortext").length;
    for (var i=num;i<temp;i++){
      $($(".colortext")[$(".colortext").length-1]).remove();

    }

  }

jQuery根据另一个输入值输入倍数

3 个答案: