.change() scheint um eine Umdrehung nach hinten zu liegen

Question

Ich habe hier eine Geige erstellt https://jsfiddle.net/691t4709/3/ es scheint, den Wert kein Problem zu aktualisieren, aber der Wert wird nur aktualisiert (und daher wird der richtige APR nur angewendet), wenn Sie ändern es noch einmal, also zum Beispiel, wenn Sie 5 Jahre und dann 2 Jahre wählen, würden die 2 Jahre 4,9% nicht 0% zeigen.

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

Hier ist der aktualisierte Code. Statt if-else, können Sie das zu switch-case bewegen und rufen computeLoan() nach dem change abgeschlossen ist (das heißt am Ende davon)

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>

Answer 2

Ihr Ausgabeelement scheint zu fehlen. Es gibt kein Element mit ID 'monatliche Zahlungen'

Das eigentliche Problem ist jedoch, dass Sie keine Kontrolle über die Reihenfolge haben, in der die Ereignisse abfeuern. Ihre computeLoan-Funktion ist an das onchange-Attribut Ihres Elements gebunden, während Sie eine andere anonyme Funktion haben, die die über jQuery angehängten Werte manipuliert.

Ein wenig Forschung zeigt, dass jquery Ereignisse in der Reihenfolge aufrufen, in der sie hinzugefügt wurden. Wenn das onclick-Ereignis zuerst hinzugefügt wird, berechnet es das Darlehen und aktualisiert dann die Werte in den Steuerelementen (weshalb Sie die Verzögerung sehen).

Die einfachste Lösung ist, computeLoan am Ende Ihrer anonymen Funktion aufzurufen, um sicherzustellen, dass der letzte Wert der Elemente verwendet wird.

Andere Lösungen Lösungen binden computingLoan mit jquery nach Ihrer anonymen Funktion oder nur die Funktionen kombinieren!

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