jQuery的填充inputfield計算器

Question

自動我有個一個字段，用戶可以輸入一個號碼，並自動獲取百分比值：

https://jsfiddle.net/km6Lznex/

（請酌量添加「事件」作爲參數在的jsfiddle功能，在使用火狐的情況下）

$('#table').on('keyup', '.update', function (event) { 
    var key = event.keyCode || event.charCode; 
    if(key == 8 || key == 46) return false; 
    calculateTotals(); 
}); 

$('#percent').change(function() { 
    calculateTotals(); 
}); 

function calculateTotals(){ 
    var dscnt_addition_percent = $('#percent'); 
    var dscnt = dscnt_addition_percent.val().trim().replace(/[^0-9$.,]/g, ''); 
    dscnt = dscnt == '' ? 0 : dscnt; 
    dscnt_addition_percent.val(dscnt);  

    var subtotal = parseInt($('#sum').val()); 
    var grandTotal = $('#grandTotal').val(); 
    var m = dscnt_addition_percent.val() * subtotal/100; 
    $('#euro').val(m); 
    $('#grandTotal').val(m + subtotal); 
} 

<div id="table"> 
    € <input type="text" id="euro" placeholder="0,00 €" /><br> 
    % <input type="text" id="percent" value="0" placeholder="0,00 %" /><br> 
    subtotal <input type="text" class="update" id="sum" disabled value="10000" /><br> 
    total <input type="text" class="form-control update" id="grandTotal" placeholder="0,00" /> 

現在我想與T做他textfield爲€。當我在金額類型，百分比場和總場應該更新

Answer 1

當您更改#percent它#grandTotal和#euro以輸入作爲#sum和#percent計算新的價值。現在你改變#euro時想同樣的事情，服用本身和#sum作爲輸入。由於您現在正在計算％，所以您需要將該函數稍微改變一點 即。

時#percent改變euro = percent * subtotal/100;

時#euro改變percent = euro * 100/subtotal;

所以要麼你可以使用一個單獨的功能或用途相同與even.target告訴到底哪個文本框是事件的起源

function calculateTotals(event) 
{ 
    var dscnt_addition_percent = $('#percent'); 
    ... 
    .. 
    . 

    if(event.target.id=="percent") 
    { 
    //CALCULATE € 
    } 

    if(event.target.id=="euro") 
    { 
    //CALCULATE % 
    var euro = $("#euro").val(); 
    var subtotal = parseInt($('#sum').val()); 

    var percent= euro * 100/subtotal; 
    dscnt_addition_percent.val(percent); 
    $('#grandTotal').val(euro + subtotal); 
    } 

} 

這裏幾乎沒什麼變化

$('#table').on('keyup', '.update', function (event) { 
    var key = event.keyCode || event.charCode; 
    if(key == 8 || key == 46) return false; 
    calculateTotals(event); 
}); 

$('#percent,#euro').change(function (event) { 
    calculateTotals(event); 
});