javascript - .change() 似乎落后了一圈

Question

我在这里创建了一个 fiddle https://jsfiddle.net/691t4709/3/似乎更新该值没有问题，但该值仅在您再次更改时更新(因此仅应用正确的年利率)，因此例如，如果您选择 5 年，然后选择 2 年，则 2 年将显示 4.9 %不是0%。

  jQuery(document).ready(function($) {
    $('#months').change(function(){
      $('#interest_rate option').prop('disabled', false);
        if(this.value == '24')
          $('#interest_rate option:not([value="0"])')
          .prop('disabled', true).parent().val('0');
        else if(this.value == '60')
          $('#interest_rate option:not([value="4.9"])')
          .prop('disabled', true).parent().val('4.9');
        else if(this.value == '120')
          $('#interest_rate option:not([value="5.9"])')
          .prop('disabled', true).parent().val('5.9');
    });
  });

Answer 1

这是更新后的代码。您可以将其移至 switch-case 并在 change 后调用 computeLoan()，而不是 if-else已完成(即在其末尾)

function computeLoan() {
  var amount = document.getElementById('amount').value;
  var interest_rate = document.getElementById('interest_rate').value;
  var months = document.getElementById('months').value;
  var interest = (amount * (interest_rate * .01)) / months;
  var payment = ((amount / months) + interest).toFixed(2);

  var payment_total = (payment * months).toFixed(2);
  var interest_total = (interest * months).toFixed(2);

  payment = payment.toString().replace(/B(?=(d{3})+(?!d))/g, ",");
  payment_total = payment_total.toString().replace(/B(?=(d{3})+(?!d))/g, ",");
  interest_total = interest_total.toString().replace(/B(?=(d{3})+(?!d))/g, ",");

  document.getElementById('monthly-payments').innerHTML = document.getElementById('months').value + " monthly <br> payments of";
  document.getElementById('payment').innerHTML = "£" + payment;
  document.getElementById('total-repayment').innerHTML = "£" + payment_total;
  document.getElementById('total-cost-credit').innerHTML = "£" + interest_total;
}

jQuery(document).ready(function($) {
  $('#months').change(function() {
    $('#interest_rate option').prop('disabled', false);
    switch (this.value) {
      case '24':
        $('#interest_rate option:not([value="0"])')
          .prop('disabled', true).parent().val('0');
        break;
      case '60':
        $('#interest_rate option:not([value="4.9"])')
          .prop('disabled', true).parent().val('4.9');
        break;
      case '120':
        $('#interest_rate option:not([value="5.9"])')
          .prop('disabled', true).parent().val('5.9');
        break;
    }
    computeLoan();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="et_pb_column et_pb_column_2_3">
    <label style="margin-bottom: 10px;">Amount to borrow:</label>
    <input type="range" name="loan_input" id="amount" value="1000" min="1000" max="30000" step="250" oninput="amount_output.value = amount.value" onchange="computeLoan()" style="margin-bottom: 20px;">
  </div>
  <div class="et_pb_column et_pb_column_1_3" style="margin-right: 0;">
    <label style="opacity: 0; margin-bottom: 10px;">Amount to borrow:</label>
    <p></p>
    <div class="input-group" style="margin-bottom: 20px;">
      <div class="input-group-addon">£</div>
      <output class="form-control currency" name="amount_output" id="amount_output">1000</output>
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <label style="margin-bottom: 10px;">To pay back over:</label>
  <select class="form-control" id="months" onchange="computeLoan()" style="margin-bottom: 20px;">
      <option value="24">2 Years</option>
      <option value="60">5 Years</option>
      <option value="120">10 Years</option>
   </select>
  <label>The interest rate is determined by the length of the loan:</label>
  <select class="form-control" id="interest_rate" onchange="computeLoan()">
      <option value="0">0% (2 Years)</option>
      <option value="4.9">4.9% (5 Years)</option>
      <option value="5.9">5.9% (10 Years)</option>
   </select>
</form>

<p style="border-bottom: 1px dashed #e5e5e5; padding-bottom: 10px;">Total Repayment: <span id="total-repayment" class="pull-right">£1,000.08</span></p>
<p style="border-bottom: 1px dashed #e5e5e5; padding-bottom: 10px; margin-bottom: 20px;">Total Cost of Credit: <span id="total-cost-credit" class="pull-right">£0.00</span></p>
<p id="monthly-payments">
</p>
<p id="payment">
</p>
</p>
</p>