jQuery多个运行总计

Question

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> 

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

Answer 2

你的每一个（）函数运行，如果你定义了两个不同功能的所有输入字段不管......

$('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 id="chkTotalgroup1"></div> 

然后在您的onChange处理程序中将“this”更改为您要汇总的每个组。 （1组，第2组等等...）上的两个和

onchange = "GetTotal1(group1)"