Question

对标题感到抱歉。我不知道如何解释具体的内容。

所以我一直在创建一个可以使用jQuery动态删除和复制字段的简单表单。工作得很好！

问题 - 我有一个当前克隆last_input的函数（例如，参见 JSFiddle ）。这适用于重复按钮，但对于添加按钮，我只想添加一个新的空白行。

我想知道是否很容易添加一个额外的函数来解决这个问题，或者在我调用addLine（）方法时是否可以使用不同的参数？

HTML：

<form action="javascript:void(0);" method="POST" autocomplete="off">
    <button class="add">Add Field</button>
    <div class='input_line'>
        <input type="text" name="input_0" placeholder="Input1">
        <input type="button" class="duplicate" value="duplicate">
        <input type="button" class="remove" value="remove">
    </div>
</form>
<hr>
<form action="javascript:void(0);" method="POST" autocomplete="off">
    <button class="add">Add Field</button>
    <div class='input_line'>
        <input type="text" name="input_0" placeholder="Input1">
        <input type="button" class="duplicate" value="duplicate">
        <input type="button" class="remove" value="remove">
    </div>
</form>

JQUERY：

function addLine($inputLine) {
    var $form = $inputLine.closest('form');
    var $newElement = $inputLine.clone(true).hide();

    $newElement.insertAfter($inputLine);
    $newElement.slideDown();
    $form.find('.remove').show();
}

$(document).ready(function () {

    'use strict';
    $('.remove').hide();

    //Add Feild
    $('.add').click(function () {
        addLine($(this).closest('form').find('.input_line:last'));
    });

    //Duplicate Feild
    $('form').on('click', '.duplicate', function () {
        addLine($(this).closest('.input_line'));
    });

});

Answer 1

您可以向addLine()添加额外的参数，例如

function addLine($inputLine, isDuplicate) {
    var $form = $inputLine.closest('form');
    var $newElement = $inputLine.clone(true).hide();
    if(!isDuplicate) {
        $newElement.find('input[type="text"]').val('');
    }

    $newElement.insertAfter($inputLine);
    $newElement.slideDown();
    $form.find('.remove').show();
}

可以像这样调用addLine

$('.add').click(function() {
  addLine($(this).closest('form').find('.input_line:last'), 0);
});
//Duplicate Feild
$('form').on('click', '.duplicate', function() {
  addLine($(this).closest('.input_line'), 1);
});

以下是更新的演示 http://jsfiddle.net/dhirajbodicherla/ge5r36pm/1/

使用方法参数添加和复制动态元素

1 个答案: