javascript - 如何使用 Javascript 来记录多项选择的分数

Question

多年来我一直在尝试解决这个问题，但似乎就是无法集中精力。

这是我的 HTML:

<select>
    <option value="0">Select</option>
    <option value="-5">Answer 1</option>
    <option value="5">Answer 2</option>
</select>

<select>
    <option value="0">Select</option>
    <option value="-5">Answer 1</option>
    <option value="5">Answer 2</option>
</select>

<p class="total">0</p>

这是我的 JS:

var score = 0;
var scoreNew = 0;
$('select').change(function() {
    scoreNew = parseInt($(this).val()) + parseInt(score);
    $('.total').text(scoreNew);
})

发生了什么:

• 如果您选择答案 1，则得分为 -5
• 如果您选择答案 2，则得分为 5(到目前为止还不错)
• 但如果您随后转到 Q2 并选择 Ans1，分数将变为 -5(而现在应该为 0)

我以为我用以下代码修复了它(但我没有):

var score = 0;
var scoreNew = 0;
$('select').change(function() {
    scoreNew += Number($(this).val());
    $('.total').text(scoreNew);
})

现在发生了什么:

• 如果我选择 Ans1，我会得到 -5(到目前为止一切顺利)
• 但是如果我选择 Ans2，我会得到 0(它应该是 5)

我觉得我几乎需要这两种方法的组合，但不太明白。

我希望一切都有意义。如果有人可以提供帮助，我们将不胜感激。谢谢。

Answer 1

由于您在更改处理程序的范围之外声明了 total，因此它将保留其最后分配的值，因此任何进一步的更改都将应用于更新后的总计，而不是原始的 0 .

如果您需要在每个选择上更新，您应该在本地声明变量并使用选择元素的所有当前值重新计算:

$('select').change(function() {
  var total = 0;
  $('select').each(function() {
    total += Number($(this).val());
  });
  $('.total').text(total);
})

fiddle :https://jsfiddle.net/zgj6sq05/