javascript - jQuery によるリアルタイムの会計変更

Question

人が請求金額を入力したときに残高の変更を含むラベルを作成しようとしています。したがって、次のようなものを想定してください...

<table>
    <tr>
        <td class="remainingBudget"></td>
        .
        .
        .

...その後....

<form>
    <table>
        <tr>
            <td><input class="percentCommitment"></td>
            <td><input class="totalAmount"></td>
            .
            . 
            .

totalAmountユーザーはフォーム入力に触れることはなくpercentCommitment、別の値に基づいて計算されるtotalAmountため、心配する必要はありません。私は、percentCommitment のキーダウン イベントで、totalAmount 入力を自動的に次のように設定しています...

$(".percentCommitment").keyup(function() {
    var commit = caluculatePercentCommitment() || 0;
    var salary = getSalary();
    var amount;
    if (commit > 0 && salary > 0) {
        ttl = (salary * commit) / 100;
    } else {
        amount = 0.00;
    }

    $(this).parent().find('.amountCommitment').val(amount);
});

この部分は正常に機能しており、人が値を変更すると、合計金額がリアルタイムで正しく計算されpercentCommitmentます。これが機能するのは、コミットメントの割合にその人の年収を掛けた値が静的であるためです。変わりません。その人が1を入力すると、給与の1％が計算されて表示されます。その後、ユーザーが 2 を追加すると、同じ元の給与から 12% が計算されます。これはまさに私が望んでいることです。

問題は、残りの予算をリアルタイムで計算することです。ユーザーが同じことをして 1 を入力すると、私の jQuery はをtotalAmount実行します。元の残りの予算からすべての変更を計算したい。remainingBudgetnewRemainingBudget = remainingBudget - (0.01 * salary)newNewRemainingBudget = newRemainingBudget - (0.12 * salary)

私はこのようなことをしようとしていました...

 $(".totalAmount").change(function (event) {
            var remain = $(".remainingBudget").text();
            remain = formatDecimalInput(remain);
            var enter = $(".totalAmount).val();
            enter = formatDecimalInput(enter);
            if (enter <= remain) {
                $(".remainingBudget")text((remain-enter).formatCurrency());
            }
            else {
                // Do nothing
                event.preventDefault();
            }
        });