jQuery的多个运行总计 [英] jQuery multiple running totals

问题描述

0I我使用jQuery来计算多个文本框的运行总和。刚刚找到如何获取工作，前几天一个真棒响应，但现在我遇到了另一个问题。当使用一个选择，对于GetTotal总量是完全计算。然而，当我有第二个选择，总计开始的冲突与彼此，不再计算正确。我一直在寻找一个解决的办法有一段时间了，没有任何人有什么想法？

下面是我目前使用的选择：

 函数GetTotal（txtBox）{
        无功总= 0;
        $（输入：文本），每个（函数（指数值）{。
            总+ = parseInt函数（$（值）.VAL（）|| 0）;
        }）;        $（＃chkTotal）的HTML（总）;
    }
 

我的观点使用这些TXT盒

 ＆LT; D​​IV CLASS =主编场＆GT;
        @ Html.TextBox（字段1的String.Empty，新{inputType下=TEXT，ID =字段1的onchange =GetTotal（本）}）    ＆LT; / DIV＆GT;
    ＆LT; D​​IV CLASS =主编场＆GT;
        @ Html.TextBox（字段2的String.Empty，新{inputType下=TEXT，ID =场2的onchange =GetTotal（本）}）    ＆LT; / DIV＆GT;
    ＆LT; D​​IV＆GT;
        ＆LT; H3个总选中＆LT; / H3 GT＆;
    ＆LT; / DIV＆GT;＆LT; D​​IV ID =chkTotal＆GT;＆LT; / DIV＆GT;
 

现在我想实现的另一个选择，这将总共两个额外的编辑栏...

 函数GetTotal1（txtBox）{
        VAR共1 = 0;
        $（输入：文本），每个（函数（指数值）{。
            共1 + = parseInt函数（$（值）.VAL（）|| 0）;
        }）;        $（＃disTotal）HTML（共1页）。
    }
 

查看：

 ＆LT; D​​IV CLASS =主编场＆GT;
        @ Html.TextBox（字段3，的String.Empty，新{inputType下=TEXT，ID =FIELD3的onchange =GetTotal1（本）}）    ＆LT; / DIV＆GT;
    ＆LT; D​​IV CLASS =主编场＆GT;
        @ Html.TextBox（字段4的String.Empty，新{inputType下=TEXT，ID =字段4的onchange =GetTotal1（本）}）    ＆LT; / DIV＆GT;
    ＆LT; D​​IV＆GT;
        ＆LT; H3个总分布式＆LT; / H3 GT＆;
    ＆LT; / DIV＆GT;
    ＆LT; D​​IV ID =disTotal＆GT;＆LT; / DIV＆GT;
 

解决方案

在两个和使用不同的HTML类，如

 ＆LT; D​​IV CLASS =主编场＆GT;
    @ Html.TextBox（字段1的String.Empty，新{@class =共有的inputType =TEXT，ID =字段1的onchange =GetTotal（本）}）
＆LT; / DIV＆GT;
＆LT; D​​IV CLASS =主编场＆GT;
    @ Html.TextBox（字段2的String.Empty，新{@class =共有的inputType =TEXT，ID =场2的onchange =GetTotal（本）}）
＆LT; / DIV＆GT;
＆LT; D​​IV＆GT;
    ＆LT; H3个总选中＆LT; / H3 GT＆;
＆LT; / DIV＆GT;
＆LT; D​​IV ID =chkTotal＆GT;＆LT; / DIV＆GT;
＆LT; D​​IV CLASS =主编场＆GT;
    @ Html.TextBox（字段3，的String.Empty，新{@class =共1的inputType =TEXT，ID =FIELD3的onchange =GetTotal1（本）}）
＆LT; / DIV＆GT;
＆LT; D​​IV CLASS =主编场＆GT;
    @ Html.TextBox（字段4的String.Empty，新{@class =共1的inputType =TEXT，ID =字段4的onchange =GetTotal1（本）}）
＆LT; / DIV＆GT;
＆LT; D​​IV＆GT;
    ＆LT; H3个总分布式＆LT; / H3 GT＆;
＆LT; / DIV＆GT;
＆LT; D​​IV ID =disTotal＆GT;＆LT; / DIV＆GT;
 

使用Javascript：

 函数GetTotal（txtBox）{
    无功总= 0;
    $（'输入：text.total0'）。每个（函数（指数值）{
        总+ = parseInt函数（$（值）.VAL（）|| 0）;
    }）;    $（＃chkTotal）的HTML（总）;
}功能GetTotal1（txtBox）{
    VAR共1 = 0;
    $（'输入：text.total1'）。每个（函数（指数值）{
        共1 + = parseInt函数（$（值）.VAL（）|| 0）;
    }）;    $（＃disTotal）HTML（共1页）。
}
 

0I am using jQuery to calculate a running total on multiple textboxes. Just found an awesome response on how to get that working a few days ago, but now I am running into another problem. When using one selector, the total for GetTotal is calculated perfectly. However, when I include the second selector, the totals begin to conflict with one another, and no longer calculate properly. I have been searching for a solution to this for some time now, does anyone have any ideas?

Here is the selector i am currently using:

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

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

My view uses these txt boxes

<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>

Now I am trying to implement another selector which will total two additional editor fields...

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

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

View:

<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>

解决方案

Use different HTML classes on the two sums, like

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

这篇关于jQuery的多个运行总计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！