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

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/