javascript - 如何在引用外部 html 的 while 循环中添加输入 id 值(基于迭代)？

Question

我的要求如下:我有一个选择，用于根据所选数字将输入字段添加到表单中。这些新的输入字段共享相同的 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