使用綁定的簡單JavaScript/jQuery總和函數

我有一個HTML表單，它有多個在不同文本框中進行基本SUM計算的實例。我無法控制更新或重寫HTML。我需要一種方法來編寫一個通用總和函數，它將「偵聽」任何文本框中的更改，執行總和，並將結果輸出到文本框的結果文本框中。使用綁定的簡單JavaScript/jQuery總和函數

例如：

<input id="txtBox1"/> 
<input id="txtBox2"/> 
<input id="txtSumOfBox1AndBox2"/> 

<input id="txtBox3"/> 
<input id="txtBox4"/> 
<input id="txtSumOfBox3AndBox4"/>

我想這樣做的是「綁定」或「聽」（我不知道該用），將「聽」到「txtBox1」的變化或「txtBox2」，進行數學運算，然後將結果輸出到結果框「txtSumOfBox1AndBox2」中。對於方框3和方框4，它也會這樣做。

我可以有1到很多這些，他們都需要使用相同的總和計算和輸出到它們各自的結果字段。

我能有這樣的情況：我有以下還有：

<input id="txtBox5"/> 
<input id="txtBox6"/> 
<input id="txtBox7"/> 
<input id="txtBox8"/> 
<input id="txtBox9"/> 
<input id="txtSumOfBox5Through9"/>

...這裏是我的javascript：

$('#txtProductAUsed,#txtProductBUsed').on('keypress change', { 
    inputs: "txtProductAUsed:txtProductBUsed", 
    output: "txtTotalUsed" 
}, calc_sum); 

$('#txtMixedInValue,#txtAmtNeeded,#txtLeftover').on('change', { 
    inputs: "txtMixedInValue:txtAmtNeeded:txtLeftover", 
    output: "txtTotalProduct" 
}, calc_sum); 

function calc_sum(event) { 
    var sum = 0; 
    var inputFields = event.data.inputs; 
    var totalField = event.data.output; 

    $.each(inputFields.split(':'), function() { 
    sum += Number($('#' + this).val()); 
    }); 

    $('#' + totalField).val(sum); 
}

我已經通過jQuery的綁定的文檔閱讀但對於如何獲得我需要的參數，我沒有任何意義。我得到了尋找「變化」事件的概念，但沒有對其進行編碼以使其足夠通用以接受任何輸入。

編輯我玩過「開」方法，想出了這個。

這裏是我的解決方案的的jsfiddle： https://jsfiddle.net/mrhankuk/4ox7y1v1/1/

來源

2016-04-26 Mark

看看.on（）方法。綁定已棄用。這可能很有挑戰性，因爲您沒有一種很好的方法來識別各種文本框。你必須弄清楚如何識別所有輸入文本框和輸出文本框的（唯一）id，然後將輸入連接到輸出。如果你有班級將輸入和輸出分組在一起，你會有更容易的時間。 –

編輯（用於升級再次改變相同的輸入時的值）：

於是，我改變了自己的方式聽者通過選擇你的總和，所以你可以在陣列上設置的任何選擇你想要的：

$.fn.sumListener = function() { 
    var args = arguments; 
    var $sumInput = $(this); 
    $sumInput.prop("disabled", "disabled"); 
    for(i in args) { 
    $(arguments[i]).on("change", function() { 
     $sumInput.val(0); 
     $(Array.from(args).join(",")).each(function() { 
      $sumInput.val(+$sumInput.val() + +$(this).val()); 
     }); 
    });   
    } 
}; 
$("#txtTotalUsed").sumListener("#txtProductAUsed", "#txtProductBUsed"); 
$("#txtTotalProduct").sumListener("#txtMixedInValue", "#txtAmtNeeded", "#txtLeftover", ".any");

小提琴：https://jsfiddle.net/diegopolido/sexd7b28/2/

我希望它有幫助

來源

2016-04-27 18:57:41

非常好！比我的解決方案要乾淨得多。謝謝！ – Mark

我的榮幸！：d –

使用綁定的簡單JavaScript/jQuery總和函數

回答

相關問題