Javascript .change（）似乎落后了一个回合

我在这里创建了一个fiddle，它似乎更新了值没有问题，但是当您再次更改它时，该值只会更新（因此只应用正确的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');
    });
  });

---

您的输出元素似乎丢失。没有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();
    });
  });

---

您的输出元素似乎缺失。没有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();
    });
  });

---

以下是更新的代码。在

更改

完成后（即在更改结束时），您可以将其移动到

开关盒

并调用

computeLoan（）

，而不是

if else

函数computeLoan（）{
var amount=document.getElementById（'amount'）。值；
var利率=document.getElementById（“利率”）.value；
var months=document.getElementById（'months'）。值；
风险值利息=（金额*（利率*.01））/月；
风险值支付=（（金额/月）+利息）。toFixed（2）；
var付款总额=（付款*月）。固定（2）；
var利息总额=（利息*月）。固定（2）；
payment=payment.toString（）.replace（/B（？=（d{3}）+（？！d））/g，“，”；
payment_total=payment_total.toString（）.replace（/B（？=（d{3}）+（？！d））/g，“，”；
利息总额=利息总额.toString（）.replace（/B（？=（d{3}）+（？！d））/g，“，”；
document.getElementById（'monthly-payments'）。innerHTML=document.getElementById（'months'）。value+“每月的付款”；
document.getElementById（“付款”）.innerHTML=“£”+付款；
document.getElementById（‘全额还款’）.innerHTML=“£”+付款总额；
document.getElementById（'total-cost-credit'）。innerHTML=“£”+利息总额；
}
jQuery（文档）.ready（函数（$）{
$（'#月'）。更改（函数（）{
$（“#利率选项”）.prop（'disabled'，false）；
开关（此值）{
案例“24”：
$（“#利率选项：非（[value=“0”]））
.prop（'disabled'，true）.parent（）.val（'0'）；
打破
案例“60”：
$（“#利率选项：非（[value=“4.9”]））
.prop（'disabled'，true）.parent（）.val（'4.9'）；
打破
案件‘120’：
$（“#利率选项：非（[value=“5.9”]））
.prop（'disabled'，true）.parent（）.val（'5.9'）；
打破
}
computeLoan（）；
});
});

借款金额：
借款金额：

£
1000
.00
偿还：
两年
五年
十年
利率由贷款期限决定：
0%（2年）
4.9%（5年）
5.9%（10年）
还款总额：1000.08英镑

信贷总成本：0.00英镑






以下是更新的代码。在
更改
完成后（即在更改结束时），您可以将其移动到
开关盒
并调用
computeLoan（）
，而不是
if else


函数computeLoan（）{
var amount=document.getElementById（'amount'）。值；
var利率=document.getElementById（“利率”）.value；
var months=document.getElementById（'months'）。值；
风险值利息=（金额*（利率*.01））/月；
风险值支付=（（金额/月）+利息）。toFixed（2）；
var付款总额=（付款*月）。固定（2）；
var利息总额=（利息*月）。固定（2）；
payment=payment.toString（）.replace（/B（？=（d{3}）+（？！d））/g，“，”；
payment_total=payment_total.toString（）.replace（/B（？=（d{3}）+（？！d））/g，“，”；
利息总额=利息总额.toString（）.replace（/B（？=（d{3}）+（？！d））/g，“，”；
document.getElementById（'monthly-payments'）。innerHTML=document.getElementById（'months'）。value+“每月的付款”；
document.getElementById（“付款”）.innerHTML=“£”+付款；
document.getElementById（‘全额还款’）.innerHTML=“£”+付款总额；
document.getElementById（'total-cost-credit'）。innerHTML=“£”+利息总额；
}
jQuery（文档）.ready（函数（$）{
$（'#月'）。更改（函数（）{
$（“#利率选项”）.prop（'disabled'，false）；
开关（此为.v