Question

我有一个问题，我一直坚持。我有一个表单，并希望动态地能够调用表单中的第n组输入字段，以便在输出第n组答案的方程式中使用它们。例如，“footage2”应插入一个方程式，该方程式将给出“postQuantity2”，然后应使用“footage3”来确定“postQuantity3”。问题是表单可以动态添加输入区域，所以我不能只是硬编码它来做我想要的。有关如何将第n组数字用于方程式然后给出第n组答案的任何想法？如果有人能够解释这是如何工作的，或者只是指出它不会如此不受欢迎！谢谢！

这是一个片段 - http://jsfiddle.net/gv0029/QGW7R/ - 让您对我正在使用的内容有一个基本的了解，这里有一些html和js。

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

我认为nth-child不会在这种情况下工作，因为有多个子元素，并且op想要匹配它们。

在您的素材元素上，添加一个数据属性，比方说，数据 - 哪个配对与

模式

id = n data-which-pair = n

$（ “＃素材” + N）。点击（函数（）{ var n = $（this）.attr（“data-which-pair”）; 用$（“＃postQuantity”+ n）做一些很酷的事情; }

你可能只能做一个函数（n），但我通常会遵循这种冗长的方法，因为它更容易看到发生了什么。请注意，显然，上面是您需要适应的伪代码。

JQuery - 用“nth”动态选择输入

1 个答案: