0

0複数のテキストボックスの現在の合計を計算するためにjQueryを使用しています。数日前にそれを機能させる方法について素晴らしい回答を見つけましたが、今は別の問題に直面しています。1つのセレクターを使用する場合、GetTotalの合計は完全に計算されます。ただし、2番目のセレクターを含めると、合計が互いに競合し始め、正しく計算されなくなります。私はこれに対する解決策をしばらく探していましたが、誰かアイデアはありますか？

これが私が現在使用しているセレクターです：

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

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

私のビューはこれらのtxtボックスを使用しています

<div class="editor-field">
        @Html.TextBox("Field1", String.Empty, new {InputType = "text", id = "field1", onchange = "GetTotal(this)" })

    </div>


    <div class="editor-field">
        @Html.TextBox("Field2", String.Empty, new {InputType = "text",  id = "field2", onchange = "GetTotal(this)" })

    </div>
    <div>
        <h3>Total Checked</h3>
    </div>

<div id="chkTotal"></div>

今、私は2つの追加のエディターフィールドを合計する別のセレクターを実装しようとしています...

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

        $("#disTotal").html(total1);
    }

意見：

<div class="editor-field">
        @Html.TextBox("Field3", String.Empty, new {InputType = "text", id = "field3", onchange = "GetTotal1(this)" })

    </div>


    <div class="editor-field">
        @Html.TextBox("Field4", String.Empty, new {InputType = "text", id = "field4", onchange = "GetTotal1(this)" })

    </div>
    <div>
        <h3>Total Distributed</h3>
    </div>
    <div id="disTotal"></div>
4

2 に答える 2

1

次のように、2つの合計に異なるHTMLクラスを使用します。

<div class="editor-field">
    @Html.TextBox("Field1", String.Empty, new {@class = "total0", InputType = "text", id = "field1", onchange = "GetTotal(this)" })
</div>
<div class="editor-field">
    @Html.TextBox("Field2", String.Empty, new {@class = "total0", InputType = "text",  id = "field2", onchange = "GetTotal(this)" })
</div>
<div>
    <h3>Total Checked</h3>
</div>
<div id="chkTotal"></div>
<div class="editor-field">
    @Html.TextBox("Field3", String.Empty, new {@class = "total1", InputType = "text", id = "field3", onchange = "GetTotal1(this)" })
</div>
<div class="editor-field">
    @Html.TextBox("Field4", String.Empty, new {@class = "total1", InputType = "text", id = "field4", onchange = "GetTotal1(this)" })
</div>
<div>
    <h3>Total Distributed</h3>
</div>
<div id="disTotal"></div>

Javascript：

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

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

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

    $("#disTotal").html(total1);
}
于 2012-11-18T23:07:53.127 に答える
1

each（）関数は、2つの異なる関数を定義したかどうかに関係なく、すべての入力フィールドを実行します。

$('input:text').each(...

両方の関数で4つの入力フィールドすべてを取得します。

1つのアプローチは、周囲のdivごとにクラスを設定することです。

 <div class="editor-field group1">

そして、あなたの関数で持っています

 $('.group1 input:text').each(function( ...

さらに便利なアプローチは、関数パラメーターを使用してクラスを渡すことです。

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

    $("#chkTotal"+group).html(total);
}

各グループの合計divの名前を変更する必要があります。

<div id="chkTotalgroup1"></div>

次に、onChangeハンドラーの「this」を要約する各グループに変更します。（group1、group2など...）

onchange = "GetTotal1(group1)"
于 2012-11-18T22:57:26.340 に答える