0

みなさん、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>

テキストボックスで値が変更されるまで、合計は完全に計算されます。変更された場合、テキストボックスに入力されたものはすべて、現在の合計に再度追加されます。

誰か助けてもらえますか？

4

2 に答える 2

4

問題は、変数のグローバル スコープです。イベントを同じ方法で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です。

于 2012-11-16T21:07:47.340 に答える
1

最も簡単な解決策は、すべてのフォーム要素をループして計算をやり直すことです。

コードにjQueryが表示されているので、要素と各ループを取得する基本的なセレクターです。

function GetTotal(txtBox) {
    var total = 0;
    $(".calculationClass").each(
        function() {
            total += parseInt(this.value,10) || 0;
        }
    );
    $("#chkTotal").html(total);
}
于 2012-11-16T21:01:31.463 に答える