javascript运行总计添加不正确

Question

大家好，我正在尝试使用 javascript 进行一个非常简单的计算来查找运行总计。我似乎错过了一些东西。我确实浏览了SO，发现了一些非常相似的场景，但是，我似乎无法与我自己的代码联系起来。

这是我用来计算运行总计的脚本。

    var total = 0;

    function GetTotal(txtBox) {
        total += parseInt(txtBox.value) || 0;
        $("#chkTotal").html(total);
    }

这是我认为的一些代码:

 <div class="editor-field">
        @Html.TextBox("FirstDemo", String.Empty, new { id = "firstdemo", onchange =     "GetTotal(this)" })
        @Html.ValidationMessageFor(model => model.FirstDemo)
    </div>


<div>
        <h3>Total Checked</h3>
    </div>
    <div id="chkTotal"></div>

总计计算完美，直到文本框中的值发生更改，在这种情况下，在文本框中输入的任何内容都会再次添加到运行总计中。

有人可以帮助我吗？

Answer 1

问题在于您的 total 变量的全局范围:我想您的表单中有几个文本字段，您将它们设置为处理相同的 onchage 事件方式。第一次输入某些内容时，该值会正确添加到总计中，但是当您在任何文本字段中更改某些内容时，它会再次添加新值。同样，因为 total 具有全局范围。

您确实应该在函数内部本地移动 total 并重新解析您感兴趣的输入元素中的所有值。

由于您使用的是 jquery，因此您可以这样做:

function GetTotal(txtBox) {
    var total = 0;
    $('input:text').each(function(index, value) {
        total += parseInt($(value).val() || 0);
    });

    $("#chkTotal").html(total);
}​

这是一个jsfiddle为您演示。