Question

我是Javascript的新手，我很难理解为什么我的绑定事件不会发生。

我有一个简单的表单，它将添加并动态更新输入的subTotal和Total。

Subtotals正确更新，但获得主要总数的唯一方法是手动更新（在其中一个小计中单击或写入内容）。

我还需要动态更新总数。

我使用“更改keyup keydown paste”作为最终总计以及小计。我觉得这是我的问题所在但无法找到答案。

HTML：

1. Price: <input type='text' class='p1' value='0'>Rate: <input type='text' class='r1' value='0'>SUB TOTAL: <input type='text' class='tot1' value='0'><br>
2. Price: <input type='text' class='p2' value='0'>Rate: <input type='text' class='r2' value='0'>SUB TOTAL: <input type='text' class='tot2' value='0'><br>
3. Price: <input type='text' class='p3' value='0'>Rate: <input type='text' class='r3' value='0'>SUB TOTAL: <input type='text' class='tot3' value='0'><br>

4.TOTAL: <input type='text' class='total' value='0'>

JavaScript的：

jQuery(function($) {     
     var p1 = $(".p1");
     var r1 = $(".r1");
     var tot1 = $(".tot1");

     var p2 = $(".p2");
     var r2 = $(".r2");
     var tot2 = $(".tot2");

     var p3 = $(".p3");
     var r3 = $(".r3");
     var tot3 = $(".tot3");

     var total = $(".total");
// SUB TOTAL
    //1.
     $([p1[0], r1[0]]).bind("change keyup keydown paste", function(e) {
            var Result1;
            Result1 = parseFloat(r1.val()) + parseFloat(p1.val());
            tot1.val(Result1);
        });
    //2.    
     $([p2[0], r2[0]]).bind("change keyup keydown paste", function(e) {
            var Result2;
            Result2 = parseFloat(r2.val()) + parseFloat(p2.val());
            tot2.val(Result2);
        });
    //3.    
     $([p3[0], r3[0]]).bind("change keyup keydown paste", function(e) {
            var Result3;
            Result3 = parseFloat(r3.val()) + parseFloat(p3.val());
            tot3.val(Result3);
        });

    //4. MAIN TOTAL
     $([tot1[0], tot2[0], tot3[0]]).bind("change keyup keydown paste", function(e) {
            var Result4;
            Result4 = parseFloat(tot1.val()) + parseFloat(tot2.val()) + parseFloat(tot3.val());
            total.val(Result4);
    }); 

});

非常感谢任何有关为什么不起作用的提示。

Answer 1

您可以定义一个函数来计算总计，并在计算小计时调用它。见下面的查询：

jQuery(function($) {
     // input variables go here

     var p1 = $(".p1");
     var r1 = $(".r1");
     var tot1 = $(".tot1");

     var p2 = $(".p2");
     var r2 = $(".r2");
     var tot2 = $(".tot2");

     var p3 = $(".p3");
     var r3 = $(".r3");
     var tot3 = $(".tot3");

     var total = $(".total");
// SUB TOTAL
    //1.
     $([p1[0], r1[0]]).bind("change keyup keydown paste", function(e) {
            var Result1;
            Result1 = parseFloat(r1.val()) + parseFloat(p1.val());
            tot1.val(Result1);
          calculateTotal();
        });
    //2.    
     $([p2[0], r2[0]]).bind("change keyup keydown paste", function(e) {
            var Result2;
            Result2 = parseFloat(r2.val()) + parseFloat(p2.val());
            tot2.val(Result2);
          calculateTotal();
        });
    //3.    
     $([p3[0], r3[0]]).bind("change keyup keydown paste", function(e) {
            var Result3;
            Result3 = parseFloat(r3.val()) + parseFloat(p3.val());
            tot3.val(Result3);
         calculateTotal();
        });
// function to calculate total
var calculateTotal = function()
{
     var Result4;
            Result4 = parseFloat(tot1.val()) + parseFloat(tot2.val()) + parseFloat(tot3.val());
            total.val(Result4);
}   
});

<强> DEMO

Javascript：返回作为先前输入结果的绑定输入

1 个答案: