Question

我是jQuery的新手但是尝试学习一些非常基础的东西。我只是想在一个＆＃39; div内建立自动递增/递减输入字段名称。当CLICK添加/删除按钮时。这是我的HTML：

<div class="add_new_agent" style="display:none;">

    <div class="col-xs-12" id="add_agent_div">
        <span id="agent-remove" class="btn btn-danger glyphicon-remove "></span>
            <label class="control-label "><small>AGENT INFORMATION <span id="count_agent">1</span></small></label>

                <div class="row">
                    <div class="col-xs-6">
                        <input type="text" placeholder="Agent Name" name="agent_name_1" class="string required form-control">
                    </div>
                    <div class="col-xs-6">
                        <input type="text" placeholder="Agent Phone Number" name="agent_phone_1" class="string required form-control">
                    </div>
                </div>

            <input type="text" placeholder="Enter Agent Email Address" name="agent_email_1" class="string required form-control">

    </div>


   <button id="add_agent" type="button" class="btn">ADD MORE AGENT</button>

</div>

我在点击#add_agent时尝试构建，然后会出现新的#add_agent_div，并且点击#agent-remove时字段名称也会增加和减少字段名称。

到目前为止，我设法添加/删除新的#add_agent_div，但我无法增加/减少输入字段名称的最后一位数字：（

这是我的jQuery代码：

$('#add_agent').click(function(e){ 
    var cloneDiv = $('.add_new_agent').find('#add_agent_div').clone(true);
        $('.add_new_agent').find('#add_agent_div').after(cloneDiv);

});
$('#agent-remove').click(function() {
    if (confirm('continue delete?')) {
        $(this).parent('#add_agent_div').remove();                    
    }
});

Answer 1

首先，由于您要克隆并附加html元素，因此不应使用id，因为ids不能在页面中多次出现。相反，你应该使用类。

对于您的解决方案，您可以这样做：

$('#add_agent').click(function(e){     
    var $htmlTemplate = $('.add_new_agent').find('.add_agent_div:first').clone(true);
    $htmlTemplate.find('.count_agent').text($('.add_new_agent').find('.add_agent_div').length+1);
    $('.add_new_agent').append($htmlTemplate);

});

$('#agent-remove').click(function() {
    if (confirm('continue delete?')) {
        $(this).parent('.add_agent_div').remove();
        $('.add_new_agent').find('.add_agent_div').each(function(e,i){
            $(this).find('.count_agent').text($(this).index()+1);
        });
    }
});

这是工作演示： http://jsfiddle.net/fk82uro5/3/

Answer 2

你可以做这样的事情

  $('#add_agent').click(function(e){
    var currentNumber = /* parse this off the dom or keep track of the current number in your script */

    var newDiv = '<div class="row">' +
                  '<div class="col-xs-6">' +
                     '<input type="text" placeholder="Agent Name" name="agent_name_' + currentNumber + '" class="string ..."' +
                      ...; 
    $("#add_agent_div").append(newDiv);                 
  })

  $("#agent-remove").click(function() {
     /* remove last div in add agent div */ 
  })

Answer 3

您可以选择以下内容：http://jsfiddle.net/zo1r1s4f/1

HTML

<div class="add_new_agent">
    <div class="col-xs-12" id="add_agent_div"> <span id="agent-remove" class="btn btn-danger glyphicon-remove "></span>

        <label class="control-label "><small>AGENT INFORMATION <span id="count_agent">1</span></small>
        </label>
        <div class="row">
            <div class="col-xs-6">
                <input type="text" placeholder="Agent Name" name="agent_name_1" class="string required form-control">
            </div>
            <div class="col-xs-6">
                <input type="text" placeholder="Agent Phone Number" name="agent_phone_1" class="string required form-control">
            </div>
        </div>
        <input type="text" placeholder="Enter Agent Email Address" name="agent_email_1" class="string required form-control">
        <button class="agent_remove" type="button" class="btn">Remove</button> 
    </div>
    <button id="add_agent" type="button" class="btn">ADD MORE AGENT</button>

的jQuery

$('#add_agent').click(function (e) {
    var cloneDiv = $('.add_new_agent').find('#add_agent_div').clone(true);
    $('.add_new_agent').find('#add_agent_div').after(cloneDiv);

});
$('.agent_remove').click(function () {
        $(this).parent().remove();
});

单击div-jQuery需要增加/减少输入字段名称

3 个答案: