Question

我正在尝试使用JavaScript中的for循环动态添加值。我无法弄清楚如何比较new Array命名的section2answers中的每个值。

我创建了两个数组。保存我正在比较的所有值的一个，称为无线电。另一个为空的数组，用于保存传递第一个数组条件的值。

然后我有两个for循环。通过所有可能的答案并确定哪一个true被检查的人。

另一个for循环遍历在第一个循环中传递条件的值。然后，该循环检查新循环中的每个值以确定它们是否匹配正确答案，然后分配要输出到输入字段的分数值。

我有几个问题我可以看到。我的第一个for循环没有正确地将数组中的每个元素与我的条件进行比较。

我的第二个问题是我的第二个for循环仅使用最初点击的元素，而不是与每个if条件进行比较。和第一个循环一样，我认为它不会将循环中的每个值与if条件集进行比较。

此外，如果用户决定更改他们的答案，我无法找出从总价值中减去的方法。

我想创建一些在每次单击单选按钮时运行这些循环以提供新总计的内容。

代码：

HTML

<div class="block-margin">
                    <div class="col-xs-12 col-md-12">
                        <div class="bold">1. How long is the battery life on the PicoPix PPX 2340 Traveller?</div>
                        <div class="col-xs-12 col-md-12">
                            <div class="col-xs-3 col-md-3 form-group">
                                <label for="no1-two-hours" id="test">Two hours</label>
                                <input type="radio" id="no1-two-hours" name="NO1_ANSWER_CHOICES" value="NO1aTwoHours" />
                            </div>
                            <div class="col-xs-3 col-md-3 form-group">
                                <label for="no1-90-minutes">90 minutes</label>
                                <input type="radio" id="no1-90-minutes" name="NO1_ANSWER_CHOICES" value="NO1a90minutes" />
                            </div>
                            <div class="col-xs-3 col-md-3 form-group">
                                <label for="no1-one-hour">One hour</label>
                                <input type="radio" id="no1-one-hour" name="NO1_ANSWER_CHOICES" value="NO1aOneHour" />
                            </div>
                            <div class="col-xs-3 col-md-3 form-group">
                                <label for="no1-five-hours">Five hours</label>
                                <input type="radio" id="no1-five-hours" name="NO1_ANSWER_CHOICES" value="NO1aFiveHours" />
                            </div>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="clear"></div>
                <div class="block-margin">
                    <div class="col-xs-12 col-md-12">
                        <div class="bold">2. What size is the ladies & gents Eternity Summer?</div>
                        <div class="col-xs-12 col-md-12">
                            <div class="col-xs-3 col-md-3 form-group">
                                <label for="no2-50ml">50ml</label>
                                <input type="radio" id="no2-50ml" name="NO2_ANSWER_CHOICES" value="NO2a250ml" />
                            </div>
                            <div class="col-xs-3 col-md-3 form-group">
                                <label for="no2-75ml">75ml</label>
                                <input type="radio" id="no2-75ml" name="NO2_ANSWER_CHOICES" value="NO2a75ml" />
                            </div>
                            <div class="col-xs-3 col-md-3 form-group">
                                <label for="no2-125ml">125ml</label>
                                <input type="radio" id="no2-125ml" name="NO2_ANSWER_CHOICES" value="NO2a125ml" />
                            </div>
                            <div class="col-xs-3 col-md-3 form-group">
                                <label for="no2-100ml">100ml</label>
                                <input type="radio" id="no2-100ml" name="NO2_ANSWER_CHOICES" value="NO2a100ml" />
                            </div>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="clear"></div>

JS：

$('input[type="radio"]').on('change', function () {
            var section2a1 = document.getElementById('no1-two-hours');
            var section2a2 = document.getElementById('no2-100ml');
            var section2a3 = document.getElementById('no3-almond');
            var section2a4 = document.getElementById('no4-2years');
            var section2a5 = document.getElementById('no5-reveal');
            var section2a6 = document.getElementById('no6-mild');
            var section2a7 = document.getElementById('no7-60');
            var section2a8 = document.getElementById('no8-110');
            var section2a9 = document.getElementById('no9-80cm');
            var section2a10 = document.getElementById('no10-two');
            var total = 0;
            var radios = $('input[type="radio"]');
            var section2answers = new Array ();
            for (i=0; i<radios.length; i++) {
                if ($('input[type="radio"]').prop('checked')) {
                    section2answers.push(this);
                }
            }
            for (i=0; i<section2answers.length; i++) {
                if (this == section2a1) {
                    total += 4;
                } else if (this == section2a2) {
                    total += 4;
                }
            }
            $('#ints-right-two').val(total);
        });

有关如何使这项工作的任何建议表示赞赏。

Answer 1

在第一个for循环中，您在if语句中使用$('input[type="radio"]')。这将始终返回第一个单选按钮的prop。您可以尝试$('input[type="radio"]').eq(i)，因为i是您第一个for循环中的i。

Answer 2

您似乎认为循环内的this引用当前索引处的数组元素。它不是。它仍然是用作调用包含循环的函数的上下文的对象。

for (i = 0; i < radios.length; i++) {
  if ($(radios[i]).prop('checked')) {
    section2answers.push(radios[i]);
  }
}
for (i = 0; i < section2answers.length; i++) {
  if (section2answers[i] == section2a1) {
    total += 4;
  } else if (section2answers[i] == section2a2) {
    total += 4;
  }
}

使用Javascript动态添加值

2 个答案: