如何使用按钮允许用户添加/减去输入元素并维护元素值序列?

时间:2016-09-29 18:07:04

标签: javascript jquery html css twitter-bootstrap

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

每个问题的最大选择数为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);
    });

2 个答案:

答案 0 :(得分:0)

为什么要调用像这样的复杂(和低性能)扫描选择器?也许你有理由?

如果是我,我只需在按钮上添加ID,然后直接调用它们。 $(&#39;#radioid&#39;)值();

沿着这些方向的东西。这有帮助吗?寻找父母/孩子并扫描dom直到找到一些东西应该不惜一切代价避免恕我直言。有时它很有用,但实际上它会在一年内页面被重构时产生一个维持性的噩梦,而有些人不知道你的dom扫描代码会改变HTML,然后你的代码开始运行他们的HTML并且jquery的乐趣才真正开始。

这有帮助吗?

使用ID可以节省jQuery的生命。

答案 1 :(得分:0)

我没有找到无线电元素的最后一个val,而是在Dim RangeData As Integer Dim rng As Range Dim ctInputbox As String Dim CT As ChartTitle Dim nsnInputbox As String Dim nsn As Worksheet 'Change Data source to currentley selected cells Set rng = Selection 'Add a chart onto the active sheet and select the chart ActiveSheet.Shapes.AddChart.Select 'Chart type is Clustered Column chart ActiveChart.ChartType = xlColumnClustered 'Assign a chart title: 'instead of using the content of cell H13 as the chart title, ask 'the user for the title of the chart and set the title 'Add user data to create a chart title ctInputbox = InputBox("Please enter a chart title", "Chart Title Name") ActiveChart.HasTitle = True With ActiveChart.ChartObjects Set CT = ctInputbox End With End Sub ul的子节点上调用.length,在每个按钮点击时存储在变量中,并使用if语句,并且它有效应该如此。