当我点击ID为btnAdd
的按钮时,我正在使用此代码克隆文本输入字段$(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重命名为name + n
我想这样做,所以我可以有一个按钮创建fx。 5个文本字段,然后用预定值填充它们。
现在我必须首先创建4个文本域共5个,然后用另一个按钮调用该函数,以改变文本字段。
赞赏正确方向的一点。
我在评论中使用的示例:
假设我想要一个可以输入名称列表的网站
我从一个输入框开始
<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’)
}
但是如果用户没有创建足够的输入框克隆,则只填写创建的克隆。
答案 0 :(得分:0)
我希望我理解你想要的行为。它基本上在你想要的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>