Question

当我点击按钮时，jQuery在div中添加新输入，如下所示：

$('#addIndirectCityBtn').click(function () {
    var inputs = $("#additionalCityInputs input").length

    if (inputs <= 3) {
        $('#additionalCityInputs').append('<input type="text" placeholder="Miasto" class="form-control" style="margin-bottom: 5px;" />')
    }
})

如何为每个新输入添加uniqe ID？例如id =＆＃34; new1＆＃34;对于第二个id =＆＃34; new2＆＃34;等等。

有什么想法吗？

Answer 1

$('#addIndirectCityBtn').click(function () {
    var inputs = $("#additionalCityInputs input").length

    if (inputs <= 3) {
        var newId = 'newId'+(inputs + 1);
        $('#additionalCityInputs').append('<input id="'+newId+'" type="text" placeholder="Miasto" class="form-control" style="margin-bottom: 5px;" />')
    }
})

Answer 2

尝试：

var counter = 0;
$('#addIndirectCityBtn').click(function () {
    var inputs = $("#additionalCityInputs input").length

    if (inputs <= 3) {
        $('#additionalCityInputs').append('<input id="new' + ++counter + '" type="text" placeholder="Miasto" class="form-control" style="margin-bottom: 5px;" />')
    }
})

Answer 3

使用IFFE

  (function(){
      var a = 0;
       $('#addIndirectCityBtn').click(function () {
        var inputs = $("#additionalCityInputs input").length

        if (inputs <= 3) {
            $('#additionalCityInputs').append('<input id="new'+ ++a + '" type="text" placeholder="Miasto" class="form-control" style="margin-bottom: 5px;" />')
        }
    })
    }());

Answer 4

使用一些计数器变量来实现此目的。

var i=0;
$('#addIndirectCityBtn').click(function () {
    var inputs = $("#additionalCityInputs input").length;
    i++;
    if (inputs <= 3) {
        $('#additionalCityInputs').append("<input id='new"+i+"' type='text' placeholder='Miasto' class='form-control' style='margin-bottom: 5px;' />");
    }
});

使用带有uniqe id的jQuery附加输入

4 个答案: