动态元素的添加和复制与方法参数

Dynamic Element Adding and Duplicating with method perameters

本文关键字：方法 参数 复制 元素 添加 动态      更新时间：2023-09-26

不好意思。我不知道如何解释这么具体的事情。

所以我一直在创建一个简单的表单，可以使用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'));
    });
});

您可以像这样为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/

相关文章：