且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

在点击事件中添加多个字段

更新时间:2023-12-01 12:46:04

在您的代码中,您只是克隆了最后一个元素.我建议您将整个地址包装在div包装器中,然后克隆包装器,而不要克隆每个元素.然后,您可以遍历克隆的对象.尝试我的演示并检查输出HTML以查看其工作原理.

In your code you are just cloning the last element. I would suggest you to wrap the whole address inside a div wrapper and clone the wrapper instead of cloning each and every element. Then you can work through the cloned object. Try my demo and check the output HTML to see how it works.

演示

下面是实际代码,

JS:

$(document).ready(function() {
    $('#btnAdd').click(function() {
        var $address = $('#address');
        var num = $('.clonedAddress').length;
        var newNum = new Number(num + 1);
        var newElem = $address.clone().attr('id', 'address' + newNum).addClass('clonedAddress');

        //set all div id's and the input id's
        newElem.children('div').each(function(i) {
            this.id = 'input' + (newNum * 5 + i);
        });
        newElem.find('input').each(function() {
            this.id = this.id + newNum;
            this.name = this.name + newNum;
        });

        if (num > 0) {
            $('.clonedAddress:last').after(newElem);
        } else {
            $address.after(newElem);
        }

        $('#btnDel').removeAttr('disabled');

        if (newNum == 3) $('#btnAdd').attr('disabled', 'disabled');
    });

    $('#btnDel').click(function() {
        $('.clonedAddress:last').remove();
        $('#btnAdd').removeAttr('disabled');
        if ($('.clonedAddress').length == 0) {
            $('#btnDel').attr('disabled', 'disabled');
        }
    });
    $('#btnDel').attr('disabled', 'disabled');
});

HTML:

<div id="address">
  <div id="input1" style="margin-bottom:4px;" class="input">
    Street<span class="required">*</span>
    <input name="Street"  type="text" id="Street">
  </div>
  <div id="input2" style="margin-bottom:4px;" class="input">
   Line2<span class="required">*</span>
   <input name="Line2"  type="text" id="Line2">
  </div>
  <div id="input3" style="margin-bottom:4px;" class="input">
   Line3<span class="required">*</span>
   <input name="Line3"  type="text" id="Line3">
  </div>
  <div id="input4" style="margin-bottom:4px;" class="input">
   Town<span class="required"><font color="#CC0000">*</font></span>   
   <input name="Town"  type="text" id="Town">
  </div>
  <div id="input5" style="margin-bottom:4px;" class="input">
   Postcode<span class="required">*</span>
   <input name="Postcode"  type="text" id="Postcode">
  </div>
</div>

注意::已从html中删除了字体标签,并在css下方添加了必需的*

NOTE: Removed font tag from html and added below css for the required *

CSS:

.required { color: #cc0000; }