Question

我为罗嗦的标题道歉，但我还没有找到解决问题的方法。我是jQuery和web开发的新手，所以任何指导都会受到赞赏。

我有一个<input>，允许用户输入他们想要填充的一组输入字段中有多少行的值（数字）。这是我的例子：

<div id="form">
<input id="num" name="num" type="text" />
</div>

<p>&nbsp;</p>

<div id="form2">
<form action="" method="post" class="form_main">
    <div class="data">
        <div class="item">
            <input id="name" name="name[]" type="text" placeholder="name" /><br/>
            <input id="age" name="age[]" type="text" placeholder="age" /><br/>
            <input id="city" name="city[]" type="text" placeholder="city" /><br/>
            <hr />
        </div>
    </div>
    <button type="submit" name="submit">Submit</button>
</form>

我的jQuery：

<script>
var itemNum = 1;
$("#num").on("change", function() {
    var count = this.value; 
    var item = $(".item").parent().html();
    //item.attr('id', 'item' + itemNum);

    for(var i = 2; i <= count; i++) {
        itemNum++;
        $(".data").append(item);            
    }
})
</script>

我在向item+itemNum添加ID <div class="item">增量时遇到问题... item.attr()无效。一旦我添加了那行代码，它就不会附加。

另外，如何在用户输入填充输入字段行的数字时获取它，如果他们更改了该数字，它将填充该确切数字而不是添加到已填充的行？对不起，如果这没有任何意义。请帮忙！

Answer 1

这是 DEMO

var itemNum = 1;
$("#num").on("change", function() {

$('.data div').slice(1).remove();  //code for removing previously populated elements.
var count = this.value;
console.log(count);
var item; 
//item.attr('id', 'item' + itemNum);
var i;
for(i = 1; i <= count; i++) {
    console.log(i);
    item = $("#item0").clone().attr('id','item'+itemNum);


    //prevent duplicated ID's
    item.children('input[name="name[]"]').attr('id','name'+itemNum);      
    item.children('input[name="age[]"]').attr('id','age'+itemNum);   
    item.children('input[name="city[]"]').attr('id','city'+itemNum);

    itemNum++;
    $(".data").append(item);            
}
})

使用 clone() 代替html（）

Answer 2

尝试

var itemNum = 1,
    item = $(".data .item").parent().html();;
$("#num").on("change", function () {
    var count = +this.value;
    if (itemNum < count) {
        while (itemNum < count) {
            itemNum++;
            $(item).attr('id', 'item' + itemNum).appendTo('.data')
        }
    } else {
        itemNum = count < 1 ? 1 : count;
        $('.data .item').slice(itemNum).remove();
    }
})

演示：Fiddle

jQuery将ID增量添加到.html（）附加在输入onchange和刷新onchange值上

2 个答案: