如何在 while 循环中添加一个输入 id 值（基于迭代），该循环引用了它之外的一段 html ？

Question

我的要求如下：我有一个select，用于根据编号selected 向表单添加输入字段。这些新的输入字段共享相同的 ID，这是一个问题。我想在 id 中添加一个数字，以便代码有效。使它变得复杂的是脚本使用 while 循环并且它在触发循环的方法（更改）之外引用了一段 html。我不知道要修改什么才能让它工作。非常感谢任何帮助。

这是 jsfiddle 中的一个工作示例：http://jsfiddle.net/wzevjkb2/3/

我的脚本：

if ($('#returnRequest').length) {
    var wrapper = $('#productRowWrapper'),
        head = $("#noa_header"),
        div =
            '<div class="form-group row">' +
            '<div class="col-md-4 control-item">' +
            '<label class="control-label">* Serial number</label>' +
            '<input type="text" class="form-control requiredSerialN" name="requiredSerialN_1" />' +
            '</div>' +
            '<div class="col-md-4 control-item">' +
            '<label class="control-label">* Item is</label>' +
            '<select class="form-control requiredItemIs" name="returnProdItemIs_1">' +
            '<option value="">Select</option>' +
            '<option value="1">New and unopened</option>' +
            '<option value="2">Defective</option>' +
            '</select>' +
            '</div>' +
            '<div class="col-md-4 control-item">' +
            '<label class="control-label">* You request</label>' +
            '<select class="form-control requiredYouRequest" name="returnProdYouRequest_1">' +
            '<option value="">Select</option>' +
            '<option value="1">Replacement</option>' +
            '<option value="2">Credit only</option>' +
            '</select>' +
            '</div>' +
            '</div>';

    $('#quantityReturn').change(function () {

        var val = parseInt($(this).val());
        val ? (head.show()) : head.hide();

        while (wrapper.children().length > val)
        wrapper.children().last().remove();

        while (wrapper.children().length < val)
        wrapper.append(div);
    });
}

Answer 1

你可以将那个div模板转换成一个jquery对象并改变id值，这只是一种方法，在编程中可以通过多种方式实现一件事。但这将完成工作

if ($('#returnRequest').length) {

    var wrapper = $('#productRowWrapper'),
        head = $("#noa_header"),
        div =
            $('<div class="form-group row" />').html('<div class="col-md-4 control-item">' +
            '<label class="control-label">* Serial number</label>' +
            '<input type="text" class="form-control requiredSerialN" name="requiredSerialN_1" />' +
            '</div>' +
            '<div class="col-md-4 control-item">' +
            '<label class="control-label">* Item is</label>' +
            '<select class="form-control requiredItemIs" name="returnProdItemIs_1">' +
            '<option value="">Select</option>' +
            '<option value="1">New and unopened</option>' +
            '<option value="2">Defective</option>' +
            '</select>' +
            '</div>' +
            '<div class="col-md-4 control-item">' +
            '<label class="control-label">* You request</label>' +
            '<select class="form-control requiredYouRequest" name="returnProdYouRequest_1">' +
            '<option value="">Select</option>' +
            '<option value="1">Replacement</option>' +
            '<option value="2">Credit only</option>' +
            '</select>' +
            '</div></br>');

    $('#quantityReturn').change(function () {

        var val = parseInt($(this).val());
        val ? head.show() : head.hide();

        while (wrapper.children(".row").length > val)
        wrapper.children(".row").last().remove();

        for (var i = wrapper.children(".row").length; i < val; i++) {
            var tmp=div.clone();
            tmp.find(".requiredSerialN").attr("id","requiredSerialN_"+i);
            tmp.find(".requiredItemIs").attr("id","returnProdItemIs_"+i);
            tmp.find(".requiredYouRequest").attr("id","returnProdYouRequest_"+i);
            wrapper.append(tmp);
        };
    });
}

DEMO LINK

如何在 while 循环中添加一个输入 id 值（基于迭代），该循环引用了它之外的一段 html ？

How can I add an input id value (iteration-based) in a while loop that references a piece of html outside of it?

javascript

jquery

while-loop