Question

我不是最熟悉的jQuery，这是我第一次使用'克隆'功能。

基本上我想要完成的是拥有一个包含多个“部分”的表单，每个部分都有一个输入字段。我希望用户能够根据需要在每个部分中添加任意数量的输入字段。这些部分中的每一部分都是基于用户在流程中先前导入的值动态创建的（仅使用简单的php循环）。

我拥有它以便构建表单，但我的问题是用户能够为每个部分添加/删除输入字段。我设置它，以便php循环创建一个输入字段和每个部分的'添加'/'删除'按钮。这些项的id是根据＃节动态创建的。单击该按钮时，它会调用一个javascript函数，该函数克隆现有的输入字段，然后更新新的字段id，使其唯一。你可以在这个JSfiddle中看到我目前拥有的一个例子：http://jsfiddle.net/NWGUp/2/（请注意，由于jsfiddle不允许使用php，我只是将3个部分的html包含在id中，并且所有内容都与php循环会创建）。你会看到添加按钮不起作用。

如果我只删除第2节和第2节3，并保留第1部分的html和所有javascript完全相同的一切正常工作：http://jsfiddle.net/NWGUp/1/

显然问题是由于拥有多个“部分”，但我不知道为什么因为所有内容都设置为通过其编号标识符唯一地处理每个部分。

知道我哪里出错了吗？我知道这可能有点令人困惑，所以如果需要澄清，请告诉我！

感谢您的帮助！

这是我正在使用的javascript：

$(document).ready(function () {

        $(".addClass").click(function () {
            //get ch#
            var ch = $(this).attr('param1');

            var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
            var newNum = new Number(num + 1); // the numeric ID of the new input field being added

            //create var which stores the div name
            var divName = 'input' + ch + '_' + num;
            //alert(divName);
            // create the new element via clone(), and manipulate it's ID using newNum value
            var newElem = $('#' + divName).clone().attr('id', 'input' + ch + '_' + newNum);


            // manipulate the name/id values of the input inside the new element
            newElem.children(':first').attr('id', 'name' + ch + '_' + newNum).attr('name', 'name' + ch + '_' + newNum);

            // insert the new element after the last "duplicatable" input field
            $('#' + divName).after(newElem);

            // enable the "remove" button
            var btnName = 'btnDel' + ch;
            //alert(btnName);
            // $('#'+btnName).attr('disabled','');

        });

        $(".delClass").click(function () {
            //get ch#
            var ch = $(this).attr('param1');

            var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
            $('#input' + ch + '_' + num).remove(); // remove the last element

            // if only one element remains, disable the "remove" button
            /*if (num-1 == 1)
                  $('#btnDel'+ch).attr('disabled','disabled');*/

        });


    });

和html w /所有3个部分：

<form id="myForm">

    <h2>SECTION 1</h2>

    <div id="input1_1" class="clonedInput" style="margin-bottom:4px;">file path:
        <input id="name1_1" type="text" name="name1_1">
    </div>
    <div>
        <input id="btnAdd1" class="addClass" type="button" param1="1" value="Add Another">
        <input id="btnDel1" class="delClass" type="button" param1="1" value="Remove Last">
    </div>
    <br />
    <br />
            <h2>SECTION 2</h2>
    <div id="input2_1" class="clonedInput" style="margin-bottom:4px;">file path:
        <input id="name2_1" type="text" name="name2_1">
    </div>
    <div>
        <input id="btnAdd2" class="addClass" type="button" param1="2" value="Add Another">
        <input id="btnDel2" class="delClass" type="button" param1="2" value="Remove Last">
    </div>
    <br />
    <br />
            <h2>SECTION 3</h2>
    <div id="input3_1" class="clonedInput" style="margin-bottom:4px;">file path:
        <input id="name3_1" type="text" name="name3_1">
    </div>
    <div>
        <input id="btnAdd3" class="addClass" type="button" param1="3" value="Add Another">
        <input id="btnDel3" class="delClass" type="button" param1="3" value="Remove Last">
    </div>
</form>

和html w /只有第1部分：

<form id="myForm">
    <div id="input1_1" class="clonedInput" style="margin-bottom:4px;">file path:
        <input id="name1_1" type="text" name="name1_1">
    </div>
    <div>
        <input id="btnAdd1" class="addClass" type="button" param1="1" value="Add Another">
        <input id="btnDel1" class="delClass" type="button" param1="1" value="Remove Last">
    </div>
    <br />
    <br />

</form>

Answer 1

一般情况下，您可以在不设置ID和名称的情况下离开，在这种情况下，一切都变得更加简单。

HTML：

<form id="myForm">
    <div class="section">
        <h2>SECTION 1</h2>
        <div class="inputWrapper hidden">file path:
            <input type="text" name="name1[]" />
        </div>
        <div class="controls">
            <input class="addClass" type="button" value="Add Another" />
            <input class="delClass" type="button" value="Remove Last" />
        </div>
    </div>
    <div class="section">
        <h2>SECTION 2</h2>
        <div class="inputWrapper hidden">file path:
            <input id="name2_1" type="text" name="name2[]" />
        </div>
        <div class="controls">
            <input class="addClass" type="button" value="Add Another" />
            <input class="delClass" type="button" value="Remove Last" />
        </div>
    </div>
    <div class="section">
        <h2>SECTION 3</h2>
        <div class="inputWrapper hidden">file path:
            <input type="text" name="name3[]" />
        </div>
        <div class="controls">
            <input class="addClass" type="button" value="Add Another" />
            <input class="delClass" type="button" value="Remove Last" />
        </div>
    </div>
</form>

Javascript：

$(function() {
    $(".addClass").on('click', function () {
        var $sect = $(this).closest(".section");
        $sect.find(".inputWrapper").eq(0).clone().show().insertBefore($sect.find(".controls"));
        $sect.find(".delClass").attr('disabled', false);
    }).trigger('click');
    $(".delClass").on('click', function () {
        var $sect = $(this).closest(".section");
        $sect.find(".inputWrapper:last").remove();
        if($sect.find(".inputWrapper:visible").length <= 1) {
            $(this).attr('disabled', true);
        }
    }).attr('disabled', true);
});

Updated fiddle

在多个按钮上使用jquery .clone函数

1 个答案: