如何使用div id javascript添加增量值

Question

我正在嘗試使用JavaScript在表單區域中添加一組輸入字段。 我的代碼正常工作。

   $(document).ready(function() {
        var max_fields      = 10;
        var wrapper         = $(".input_fields_wrap");
        var add_button      = $("#add_field_button");

        var x = 1;
        $(add_button).click(function(e){
            e.preventDefault();
            if(x < max_fields){
                x++;
                $(wrapper).append('<div><div class="form-group"><label>City</label><select class="form-control" id="bcity" name="bcity[]">' +
                '<option value=" ">Select</option>' + '</select></div><a href="#" class="remove_field">Remove</a></div>'); //add input box
            }
        });

        $(wrapper).on("click",".remove_field", function(e){ //user click on remove text

            e.preventDefault(); $(this).parent('div').remove(); x--;
        })
    });

但是我想用id="bcity"添加x的值。 我正在嘗試但給出錯誤。

Answer 1

jQuery的

在這里，您必須將字符串分成不同的部分，以便在循環中動態工作。

 $(document).ready(function() {
     var max_fields = 10;
     var wrapper = $(".input_fields_wrap");
     var add_button = $("#add_field_button");

     var x = 1;
     $(add_button).click(function(e) {
         e.preventDefault();
         if (x < max_fields) {
             x++;
             $(wrapper).append('<div><div class="form-group"><label>City</label><select class="form-control" id="bcity' + x +  '" name="bcity[]">' +
                 '<option value=" ">Select</option>' + '</select></div><a href="#" class="remove_field">Remove</a></div>'); //add input box
         }
     });

     $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text

         e.preventDefault();
         $(this).parent('div').remove();
         x--;
     })
 });

Answer 2

請注意，刪除時您正在執行x-- ，因此您可以使用重復的名稱，因此我建議使用幾個變量：

var x = 1;
var fields = 1;

x使用完全一樣@Harben建議，以及fields控制總場數：

if (fields < max_fields) {
    x++;
    fields ++;

    $(wrapper).append('<div><div class="form-group"><label>City</label><select class="form-control" id="bcity' + x +  '" name="bcity[]">' +
        '<option value=" ">Select</option>' + '</select></div><a href="#" class="remove_field">Remove</a></div>'); //add input box
}

但是，之后，在移除時：

$(wrapper).on("click", ".remove_field", function(e) { 
    //user click on remove text
    e.preventDefault();
    $(this).parent('div').remove();
    fields--;
});

這樣，您將避免名稱重疊，並且在必要時可以使用簡單的JQuery函數引用所有創建的字段。