关于模糊的jQuery更新行总计

Question

我有一个部分，其中有6个订单项供用户输入他们的班级信息以进行报销。我希望用户能够输入书籍和学费的成本，然后当它们是tab或keyup时，它将输入该行末尾的总数以及更新所有这些内容的总计。

使用jQuery执行此操作的最佳方法是什么？变更或密钥是更好的解决方案吗？

Answer 1

我建议您应该为＃34;学费＃34;和＃34;书籍＆＃34;文本框。

这样的事情：

$(function() {
  $("#Class1Tuition #Class1Book").blur(function(){
    $("#Class1Total").val(parseInt($("#Class1Tuition").val()) + parseInt($("#Class1Book").val()));
    CalculateGrandTotal();  //It will calculate the grand total and fill into textboxt. You should create this function
  });
});

Answer 2

这种情况正是.on()的设计目标。阅读该页面以获取更多详细信息，但基本上您可以将单个事件侦听器附加到将侦听来自所有这些事件的所有框的父元素，而不是将一堆侦听器附加到每个框。如果没有实际代码，我只是假设您的代码结构，但这是一个例子：

$('#ClassDetails').on('blur','input.books input.fees',function(evt) {
    $currow = $(this).closest('tr');
    $currow.find('.total').val(parseInt($currow.find('.fees').val()) + parseInt($currow.find('.books').val()))
    CalculateGrandTotal();
});

与将事件监听器附加到每个元素相比，这将更有效，更快速，更轻松，并且使用imo更好。

作为奖励，如果你想听多个事件（模糊和键盘，比如说），你可以通过简单地指定多个以空格分隔的事件来实现，如下所示：

$('#ClassDetails').on('blur keyup','input.books input.fees',function(evt) {

如果您正在执行此操作，请考虑检查密钥代码（evt.which）并仅对其进行处理。您可能想要进行一些检查，除非您想要总结部分数字（在15之前将15加1到总数）。

您可以考虑添加的另一件事，取决于您正在使用的字段数量以及事物的速度有多快，而不是获取每次更新所需的每个元素的值，而只是镜像中的值一个JSON对象，更新该对象中更改的值，然后运行该对象的总计。这将更复杂，但也比直接访问值快一点。

在这里a fiddle我为一个有类似问题的不同的人聚在一起。它使用滑块而不是文本框进行输入，但基础是相同的。

Answer 3

通过绑定keyevents来更新所需的计算值，您可以通过jquery确实做到这一点。然而，另一个选择是使用一个框架，使数据绑定更容易。我个人喜欢AngularJS框架，但还有其他一些可能更适合您的需求。

Answer 4

也许onkeyup不会被推荐，但总是取决于客户的重新获取和你想要的行为。

OnChange和onblur至少在chrome上有类似的行为，但在keydown或keyup上你有实时计算，所以你使用的东西取决于你想要的。

检查此fidle http://jsfiddle.net/ghtep/

   $(function(){
        $("#group1 .test").change(function(){
            var result = 0;
            $("#group1 .test").each(function(){ result += Number($(this).val()); })
            $("#group1 .result").val(result);
        });

   $("#group2 .test").blur(function(){
        var result = 0;
        $("#group2 .test").each(function(){ result += Number($(this).val()); })
        $("#group2 .result").val(result);
    });

    $("#group3 .test").keyup(function(){
        var result = 0;
        $("#group3 .test").each(function(){ result += Number($(this).val()); })
        $("#group3 .result").val(result);
    });
});