Question

我在这里创建了一个小提琴https://jsfiddle.net/691t4709/3/它似乎更新了没有问题的值，但是当你再次更改它时，只更新了值（因此只应用了正确的APR），例如你选择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

您的输出元素似乎缺失。没有ID为“每月付款”的元素

然而，真正的问题是您无法控制事件触发的顺序。你的computeLoan函数受元素onchange属性的约束，而你有另一个匿名函数通过jQuery操作这个附加的值。

一些研究表明，jquery会按照添加的顺序调用事件。首先添加onclick事件，它将计算贷款，然后更新控件中的值（这就是您看到滞后的原因）。

最简单的解决方案是在匿名函数的末尾调用computeLoan，以确保它使用元素的最新值。

其他解决方案解决方案包括在匿名函数之后将computeLoan与jquery绑定，或者只是组合函数！

  jQuery(document).ready(function($) {
    $('#months').change(function(){
      $('#interest_rate option').prop('disabled', false);
      console.log(this.value);
        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');
          computeLoan();
    });
  });

Edited code here

Answer 2

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

＆＃13;

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();
  });
});

＆＃13;

<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>

＆＃13;

.change（）似乎落后一转

2 个答案: