1

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

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

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

如果我只是删除第 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');*/

        });


    });

和带有所有 3 个部分的 html：

<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>

和只有第 1 部分的 html：

<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>
4

1 回答 1

0

通常，您无需设置 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);
});

更新的小提琴

于 2013-03-26T19:31:46.210 回答