javascript - 如何 jQuery - 添加按钮插入最多 10 个新输入

Question

我想点击我的按钮并插入每次点击新输入，当达到 10 时就停止。我已经完成了一个输入让我们检查我的代码: HTML代码

    <div class="form-group ">
    <label for="email2" class="col-sm-3 control-label">Occupants Email Address :</label>
    <div class="col-sm-3">
        <input type="email" class="form-control" id="email2" placeholder="Email">
    </div>
    <div class="col-sm-2">
        <span class="addMore">ADD</span>
    </div>
</div>
<div class="form-group addmore2">
    <label for="emailOccup2" class="col-sm-3 control-label">Occupants Email Address 2 :</label>
    <div class="col-sm-3">
        <input type="email" class="form-control" id="emailOccup2" placeholder="Email">
    </div>
    <div class="col-sm-2 removeEmail">
        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> remove
    </div>

CSS

.addmore2 {
    display: none;
}

j查询

$('.addMore').click(function() {
    $('.addmore2').slideDown();
})

$('.removeEmail').click(function() {
    $('.addmore2').slideUp();
});

我知道如何只插入一个，有人帮助我需要使用什么函数来使它成为 10。 谢谢!

Answer 1

查看下面的实现，它大量改编自 Add/Remove Input Fields Dynamically with jQuery .

您的目标是跟踪已添加的字段数。一旦字段数(用 x 表示)超过 10，append 方法将不再起作用。

每次点击，我们都会将字段数增加一个。

$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID

    var x = 1; //initial text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append(
                '<div class="form-group"><label>Occupants Email Address :</label><div class="col-sm-3"><input type="text" name="mytext[]"/></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--;
    })
});

这是相应的HTML

<div class="input_fields_wrap">
    <button class="add_field_button">Add More Fields</button>
    <div class="form-group"><label>Occupants Email Address :</label><div class="col-sm-3"><input type="text" name="mytext[]"/></div>
</div>

这是一个有效的 jsFiddle:jsFiddle