使用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與像這樣的keydown事件......

$(".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％是從相同的原始工資計算出來的，這正是我想要發生的事情。

問題出現在計算剩餘預算的實時。從remainingBudget減去totalAmount帶來了一個問題，因爲如果用戶做同樣的事情，輸入1，那麼我的jQuery確實newRemainingBudget = remainingBudget - (0.01 * salary)，這是好的，但如果他們在2我正在做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(); 
      } 
     }); 

Answer 1

你必須有持有的總預算金額在屏幕上的位置，並用它加上其他領域的計算剩餘金額。更換時不要以這種方式使用字段。

remainingBudget = totalBudget - (0.01 * salary) 

注意：如果需要，您可以有一個隱藏表單域來保存總數。