javascript - 如何使用按钮允许用户添加/减去输入元素并保持元素值顺序？

Question

我正在尝试使用“+”和“-”按钮来允许用户在多项选择测验创建应用程序中为每个问题添加或减去可能的选项数量。

每个问题的最大选择数为 4，最小为 2。

我遇到的问题是，添加一个选项后，减去按钮无法读取最后一个单选按钮的值。

此外，单选按钮的值在那里是因为它们用于应用程序的其他部分，而不仅仅是用于此功能。因此，单选按钮的选择从 0 开始是连续的，这一点很重要。

预先感谢您提供任何提示。

这是一个Codepen，但我正在使用的代码也在下面:http://codepen.io/anon/pen/zKdzZv?editors=1010

HTML:

<div id="q-container">
                <div class="qelem">
                    <h4>Question 1.)</h4>
                    <input type="text" class="question" style="width:400px"
                           placeholder=" Who was the 2nd president of the United States?">
                    <br>

                    <br>
                    <ul style="list-style:none;" class="choices">
                        <li><input type="radio" name="rad" value="0"><input type="text" class="choice" placeholder=" John Hancock"></li>
                        <li><input type="radio" name="rad" value="1"><input type="text" class="choice" placeholder=" Adam Smith"></li>
                        <li><input type="radio" name="rad" value="2"><input type="text" class="choice" placeholder=" John Adams"></li>
                    </ul>
                    <br>
                    <div class="btn-group btn-group-xs choiceAmt" role="group">
                        <button type="button" class="btn" id="add"><small><span class="glyphicon glyphicon-plus"></span></small></button>
                        <button type="button" class="btn" id="sub"><small><span class="glyphicon glyphicon-minus"></span></small></button>
                    </div>
                </div>
            </div>

JavaScript:

$("#add").click(function(){
        var num;
        var lastRadioVal = $(this).parents(".qelem").find("input:radio").last().val();
        console.log("lastRadioVal = " +lastRadioVal);
        num = lastRadioVal+1;
        $(this).parents(".qelem").children(".choices").append(
            '<li><input type="radio" name="rad" value="'+num+'">
                 <input type="text" class="choice"></li>'
        );
        if(lastRadioVal = 3){
            $(this).prop('disabled',true);
        }
        if(lastRadioVal > 1){
            $("#sub").prop('disabled',false);
        }
        console.log("lastRadioVal = " +lastRadioVal);
    });

    $("#sub").click(function(){
        var lastRadioVal = $(this).parents(".qelem").find("input:radio").last().val();
        console.log("lastRadioVal = " +lastRadioVal);
        $(this).parents(".qelem").find("li").last().remove();
        lastRadioVal--;
        if(lastRadioVal = 1){
            $(this).prop('disabled', true);
        }
        $("#add").prop('disabled', false);
        console.log("lastRadioVal = " +lastRadioVal);
    });

Answer 1

为什么要这样称呼复杂(且性能低下)的扫描选择器？也许你有理由？

如果是我，我会为按钮添加 ID，然后直接调用它们。$('#radioid').value();

类似的东西。这有帮助吗？寻找 parent / child 并向下扫描 dom 直到找到应该不惜一切代价避免恕我直言的东西。有时它很有用，但实际上它会造成维护噩梦，因为一年后页面被重构，有人不知道您的 dom 扫描代码更改了 HTML，然后您的代码开始针对他们的 HTML 运行，jquery 的乐趣才真正开始。

这有什么帮助吗？

在 jQuery 中使用 ID 可以挽救你的生命。