Question

我设法让我的点击事件使用以下代码。当我单击按钮时，我想要显示多个字段。例如，当我点击'添加另一个地址时，只有最后一个字段克隆，但我想要所有字段克隆，例如street，line2，line3等我不需要在jquery中添加更多代码但不确定是什么！提前致谢

脚本：

$(document).ready(function() {
    $('#btnAdd').click(function() {
        var num = $('.clonedInput').length;
        var newNum = new Number(num + 1);
        var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
        newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
        $('#input' + num).after(newElem);
        $('#btnDel').attr('disabled', '');
        if (newNum == 3) $('#btnAdd').attr('disabled', 'disabled');
    });
    $('#btnDel').click(function() {
        var num = $('.clonedInput').length;
        $('#input' + num).remove();
        $('#btnAdd').attr('disabled', '');
        if (num - 1 == 1) $('#btnDel').attr('disabled', 'disabled');
    });
    $('#btnDel').attr('disabled', 'disabled');
});

html表单示例：街*

<div id="input2" style="margin-bottom:4px;" class="clonedInput">
Line2<span class="required"><font color="#CC0000">*</font></span> 
<input name="Line2"  type="text" id="Line2"> 
</div>

<div id="input3" style="margin-bottom:4px;" class="clonedInput">
Line3<span class="required"><font color="#CC0000">*</font></span> 
<input name="Line3"  type="text" id="Line3"> 
</div>

<div id="input4" style="margin-bottom:4px;" class="clonedInput">
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="clonedInput">
Postcode<span class="required"><font color="#CC0000">*</font></span> 
<input name="Postcode"  type="text" id="Postcode">
</div>

例如，当使用上述代码时，只有Postcode字段会翻倍。我的主要目的是申请人可以添加多个地址。感谢

Answer 1

你只是克隆最后一个Div输入5.你应该将你的4 div包装在另一个div中，如：

<div id="street">
<div id="input2"> etc
</div>

然后克隆你的街道div：

var streetClone = $('#street').clone(true);
// update ID 
streetClone .find('*').andSelf().filter('[id]').each(function () {
this.id = <Replace with new>
}
// Now insert after
$('#street').after(streetClone);

Answer 2

在您的代码中，您只是克隆最后一个元素。我建议你将整个地址包装在div包装器中并克隆包装器而不是克隆每个元素。然后，您可以处理克隆的对象。试试我的演示并检查输出HTML，看看它是如何工作的。

DEMO

以下是实际代码，

<强> 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下添加了所需的*

<强> CSS：

.required { color: #cc0000; }

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

2 个答案: