Javascript：返回先前輸入結果的綁定輸入

Question

我是Javascript新手，無法理解爲什麼我的綁定事件沒有發生。

我有一個簡單的表單，它將添加並動態更新輸入的subTotal和Total。

小計更新正確，但獲取主要總數的唯一方法是手動更新（單擊或寫入其中一個小計中的內容）。

我還需要動態更新總數。

我使用「change keyup keydown paste」作爲最終總計以及小計。我覺得這是我的問題所在，但無法找到答案。

這是我設置的小提琴： http://jsfiddle.net/U8a8Y/

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