Question

我正在构建一个可以添加额外字段集和输入的表单。我试图让字段集和输入有一个单独的ID和名称（如fenceDescription2，fenceDescription3），但我无法弄清楚如何使用自己的名称调用新元素（对于字段集或输入）这样它就可以为它添加一个新数字。我让它只使用一个字段，但当我有多个字段集时，无法正确获取名称和newNum。理想情况下，每次单击“添加新栅栏”时，元素的克隆将弹出下方，每个元素都有一个匹配的newNumber，对应于它们在表单中的顺序（fenceHeight2与postQuantity2和postMeasurement2，然后3与3等）。任何帮助解释如何做到这一点将不胜感激！谢谢！这是一个JSFiddle - http://jsfiddle.net/gv0029/3dnNP/1/

HTML：

    <fieldset id="fence">
    <div id="inputFence1" class="clonedInputFence">
        <fieldset id="fenceDescripton">
            <legend><strong>Fence Description</strong>

            </legend>Fence Description:
            <select name="fenceHeight" id="fenceHeight">
                <option value="select">Select Fence Height</option>
                <option value="6" id="fH6">6 Ft.</option>
                <option value="8" id="fH8">8 Ft.</option>
            </select>
        </fieldset>

        <fieldset id="post">
            <legend><strong>Post Type</strong>

            </legend>

            <label>Post Quantity:
                <input type="postQuantity" name="postQuantity" id="postQuantity" value="" />
            </label>
            <select name="postMeasurements" id="postMeasurements">
                <option value="select">Select Post Measurements</option>
                <option value="23/8 x .065 x 8" id="23/8 x .065 x 8">2 3/8 x .065 x 8</option>
                <option value="23/8 x .095 x 8" id="23/8 x .095 x 8">23/8 x .095 x 8</option>
            </select>
        </fieldset>

    </div>
</fieldset>
    <div>
        <input type="button" id="btnAddFence" value="Add Another Fence" />
        <input type="button" id="btnDelFence" value="Remove Fence" />
    </div>

JS：

 //Dynamic Fence Input Fields
        $('#btnAddFence').click(function() {
                    var num     = $('.clonedInputFence').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 the new element via clone(), and manipulate it's ID using newNum value
                var newElem = $('#inputFence' + num).clone().attr('id', 'inputFence' + newNum);

                //Fieldset creation
                newElem.find('fieldset').attr('id', 'name' + newNum);

                //Fence Description 
                newElem.find($("select[name=fenceHeight]")).attr('id', 'fenceHeight' + newNum).attr('name', 'fenceHeight' + newNum);


                //Post Type
                newElem.find($(':input[name="postQuantity"]')).attr('id', 'postQuantity' + newNum).attr('name', 'postQuantity' + newNum);
                newElem.find($("select[name=postMeasurements]")).attr('id', 'postMeasurements' + newNum).attr('name', 'postMeasurements' + newNum);



                // insert the new element after the last "duplicable" input field
                $('#inputFence' + num).after(newElem);

                // enable the "remove" button

                $('#btnDelFence').removeAttr('disabled');

                // business rule: you can only add 5 names
                //if (newNum == 5)
                    //$('#btnAdd').attr('disabled','disabled');
            });

            $('#btnDelFence').click(function() {
                var num = $('.clonedInputFence').length; // how many "duplicatable" input fields we currently have
                $('#inputFence' + num).remove();     // remove the last element

                // enable the "add" button
                //$('#btnAdd').attr('disabled','');
                $('#btnAddFence').removeAttr('disabled');

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

            $('#btnDelFence').attr('disabled','disabled');

JQuery - 基于旧名称的新名称

0 个答案: