0

0我正在使用 jQuery 计算多个文本框的运行总计。几天前刚刚找到了一个关于如何让它工作的很棒的回复，但现在我遇到了另一个问题。使用一个选择器时，GetTotal 的总数可以完美计算。但是，当我包含第二个选择器时，总数开始相互冲突，并且不再正确计算。我一直在寻找解决这个问题的方法有一段时间了，有人有什么想法吗？

这是我目前使用的选择器：

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>

现在我正在尝试实现另一个选择器，它将总共有两个额外的编辑器字段......

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

无论您是否定义了两个不同的函数，您的 each() 函数都会运行所有输入字段...

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

在这两个函数中获取所有 4 个输入字段。

一种方法是为每个周围的 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”更改为要汇总的每个组。（组 1、组 2 等等...）

onchange = "GetTotal1(group1)"
于 2012-11-18T22:57:26.340 回答
1

对两个总和使用不同的 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 回答