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);
})

小提琴：https://jsfiddle.net/zgj6sq05/

Answer 2

这是您的问题

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

您将新分数添加到0.将该行更改为

scoreNew += parseInt($(this).val());

并摆脱score var。不知道为什么会在那里？

修改

更新方法

$('select').change(function() { var score = 0 // run through each value and rebuild score $('select').each(function(){ score += parseInt($(this).val()) }) $('.total').text(score); })

它会在每次更改时重建分数。看起来很蹩脚，但速度很快。

我希望这是一个＆＃34;测试＆＃34;项目，因为这里没有什么是生产水平。

如果您无法使用fiddle，请been told。

如何使用Javascript在多项选择中保持运行得分

2 个答案: