运行克隆n次

Question

当点击id为btAdd-的按钮时，我目前正在使用此代码克隆文本输入字段

$(document).ready(function() {
            $('#btnAdd').click(function() {
                var num     = $('.clonedInput').length;
                var newNum  = new Number(num + 1);
                var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
                newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
                $('#input' + num).after(newElem);
                $('#btnDel').attr('disabled','');
                if (newNum == 25)
                    $('#btnAdd').attr('disabled','disabled');
            });

我想做的是能够按下另一个按钮，让它添加一定数量的克隆文本字段，同时仍然将ID重命名为名称+n

我想这样做，这样我就可以有一个按钮创建fx。5个文本字段，然后用预定值填充它们。

现在，我必须首先为总共5个创建4个文本字段，然后用另一个按钮调用函数，以更改文本字段。

如果能指出正确的方向，我们将不胜感激。

---

注释中使用的示例i：

比方说，我想有一个网站，在那里你可以输入的名称列表

我从一个输入框开始

<div id="input1" style="margin-bottom:4px;" class="clonedInput">
<input type="text" name="name1" id="name1" placeholder="Port" />
</div>

然后我希望用户能够添加更多的输入框。所以我在OP 中使用克隆代码

这使得用户能够手动添加他们想要的所有名称。

但我希望用户能够从预先选择的列表中进行选择，比如说足球队的所有名称列表。

所以我希望用户能够按下一个按钮，这将创建fx。11个输入框，然后用足球队的所有11个名字填写框。为了做到这一点，我一直在使用这个代码：

function Input() {
                $('#name1').val(‘John’)
                $('#name2').val(’Steve’)
                $('#name3').val(‘Maria’)
                $('#name4').val(‘Ida’)
            }

但是，如果用户还没有创建足够的输入框克隆，这只会填充创建的输入框。

Answer 1

我希望我理解你想要的行为。它基本上是用一些随机名称作为值在div块中添加输入。

var names = ["Chris", "Jimmy", "George", "Martin", "Keith"];
function createInputs(numberOfInputs, blockId) {
  var i = 0;
  var inputBlock = $("#" + blockId);
  
  inputBlock.empty();
  
  while(i < numberOfInputs && i < names.length) {
    inputBlock.append($('<input type="text" name="name" id="name'+ i + '"/>').val(names[i]));
    i++;
  }
}

input {
  display: block;
  margin: 5px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button onclick="createInputs(3, 'input1')">Create 3 random inputs</button>
<div id="input1" style="margin-bottom:4px;" class="clonedInput">
  <input type="text" name="name1" id="name1" placeholder="Port" />
</div>
<button onclick="createInputs(5, 'input2')">Create 5 random inputs</button>
<div id="input2" style="margin-bottom:4px;" class="clonedInput">
  <input type="text" name="name1" id="name1" placeholder="Port" />
</div>