Question

我有一个问题，我很难过。我正在构建一个具有输入字段的表单，然后在方程式中使用。然而，棘手的部分是我有动态创建和命名的其他字段集和输入（这样当用户点击“添加新围栏”时，会有第二个“postQuantity”命名为“postQuantity2”，然后第三个将被称为“postQuantity3”等等）。我的问题是如何更改现有的等式，仅为其特定部分（已添加的每个单独的栅栏）选择元素？例如：当我输入到footage2中时，它会在JS方程中使用该输入并将答案插入postQuantity2，然后将截止3插入postQuantity3等。任何想法都会受到高度赞赏，因为我不知道从哪里开始一。

以下是我到目前为止的一小段内容：小提琴 - http://jsfiddle.net/gv0029/QGW7R/

HTML：

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

            </legend>
            <label>Footage:
            <input type="number" id="footage" name="footage" value="" /></label>
            <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：

//Quantity for Posts
    $('#footage, #manualOverrideNo').bind('keypress keydown keyup change', function(){

            var footage = parseFloat($(':input[name="footage"]').val(),10);
            var total = '';

            if(!isNaN(footage)){
                total = Math.ceil(footage /7);
                $(':input[name="postQuantity"]').val(total.toString());
            } else {
                $(':input[name="postQuantity"]').val("");
            }
    });

//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', 'fence' + newNum);

                //Fence Description 
                newElem.find("select[name=fenceHeight]").attr('id', 'fenceHeight' + newNum).attr('name', 'fenceHeight' + newNum);
                newElem.find(':input[name="footage"]').attr('id', 'footage' + newNum).attr('name', 'footage' + 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
                //$('#btnDel').attr('disabled','');
                $('#btnDelFence').removeAttr('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');

Answer 1

动态创建元素时，可以按索引对字段集进行分组，并将其与字段关联：

newElem.data('index', currentIndex);

更新值后，您可以使用此索引更新同一组字段中的相应字段：

$field = $(event.target).closest(':input[name="footage"]'); // event.target is the element that first registered the event
index = $($field).data('index');
...
$(':input[name="postQuantity"][data-index="' + index + '"]').val(total.toString());

您可以在事件处理程序中获取事件对象：

$(...).bind(..., function(event) {

JQuery - 选择动态命名的元素以在方程中使用

1 个答案: