jQuery更新線上模糊總數

Question

我有一個部分，有6個行項目供用戶輸入他們的課程信息報銷。我希望用戶能夠輸入書本和學費的成本，然後在他們製表或鍵入時，它將進入該行末尾的總數以及更新所有這些行的總數。

什麼是最好的方法來做到這一點與jQuery？更改或密鑰更好的解決方案？

Answer 1

我的建議是你應該寫的「學費」和「書」文本框blur事件。

事情是這樣的：

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

這是你確實可以用jQuery做通過結合的KeyEvents來更新你所需要的計算值。然而，另一個選擇是使用一個使數據綁定更容易的框架。我個人喜歡AngularJS框架，但其他人可能更適合您的需求。

Answer 3

可能的onkeyup將不會RECOMENDABLE但始終這取決於客戶requeriments和你想要的行爲。

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

Answer 4

這種情況正是.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合作更好。

作爲獎勵，如果你要聽多個事件（模糊和KeyUp，說），你可以簡單的通過指定多個空格分隔的事件，像這樣做：

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

如果」重新這樣做，考慮檢查鍵碼（evt.which），並只對其進行處理。你可能想要做一些檢查，除非你想總結部分數字（在總數爲150之前的15之前加1）。

您可能會考慮添加的另一件事，取決於您使用的字段數量以及事物速度如此之快，而不是獲取每次更新所需的每個元素的值，只需將值反映爲JSON對象，更新在該對象中更改的值，然後運行總計。這會更復雜，但也比直接訪問值快一點。

這裏的a fiddle我放在一起不同的人有類似的問題。它使用滑塊而不是文本框來輸入，但基本相同。