jQuery UI滑塊計算

Question

我在頁面上有2個滑塊，1控制天數，另一個控制貸款金額。

我有這樣的計算：

function calculate(){ 
    var days = $("#days-value").val(); 
    var amount = $(".loan-amount-value").val(); 
    var percent = .10; 
    var interest = (days * amount * percent)/10; 
    var total = parseInt(amount, 10) + parseInt(interest, 10); 
    $("#total-repay").val(total); 
    $("#interest-fees").val(interest); 
}; 

但它只是工作在頁面加載時。我需要它在滑塊變化時更新。我知道每次滑塊更改時都需要調用calculate函數，但我不確定如何編寫它。這可能嗎？

下面是腳本的其餘部分：

$(document).ready(function() { 


$(function() {  

    var inputValue = $(".loan-amount-value").val(); 

    $(".loan-amount-slider").slider({ 
    min: 100, 
    max: 500, 
    step: 1, 
    value: 200, 
    slide: function(event, ui) { 
     //update loan amount value when sliding loan amount slider 
     $(".loan-amount-value").val(ui.value); 
     } 
     }); 
     //show the loan amount initially 
     $(".loan-amount-value").val($(".loan-amount-slider").slider("value"));  
     //when the loan amount changes via user input.. 
     $("#loan-amount-value").change(function(event) { 
     //change the slider to that amount 
     $(".loan-amount-slider").slider("option", "value", inputValue); 
     }) 

    var dayInputValue = $("#days-value").val(); 

    $(".days-slider").slider({ 
    min: 1, 
    max: 45, 
    step: 1, 
    slide: function(event, ui) {  
     //update day when sliding day slider 
     $("#days-value").val(ui.value); 
     } 
     }); 
     //show the day initially 
     $("#days-value").val($(".days-slider").slider("value")); 

     //when the day via user input.. 
     $("#days-value").change(function(event) { 
     //change the slider to that amount 
     $(".days-slider").slider("option", "value", dayInputValue); 
     }); 

function calculate(){ 
    var days = $("#days-value").val(); 
    var amount = $(".loan-amount-value").val(); 
    var percent = .10; 
    var interest = (days * amount * percent)/10; 
    var total = parseInt(amount, 10) + parseInt(interest, 10); 
    $("#total-repay").val(total); 
    $("#interest-fees").val(interest); 
}; 

});   }); 

Answer 1

您的calculate()函數被不正確地包裹。將其更改爲：

function calculate() { 
    var days = $("#days-value").val(); 
    var amount = $(".loan-amount-value").val(); 
    var percent = .10; 
    var interest = (days * amount * percent)/10; 
    var total = parseInt(amount, 10) + parseInt(interest, 10); 

    $("#total-repay").val(total); 
    $("#interest-fees").val(interest); 
}; 

jsFiddle example

您可能還需要添加一個調用calculate在其他滑塊的滑動功能，因此它們都做計算。

Answer 2

只需打個電話在幻燈片處理程序來計算。

$(document).ready(function() { 


$(function() {  

    var inputValue = $(".loan-amount-value").val(); 

    $(".loan-amount-slider").slider({ 
    min: 100, 
    max: 500, 
    step: 1, 
    value: 200, 
    slide: function(event, ui) { 
     //update loan amount value when sliding loan amount slider 
     $(".loan-amount-value").val(ui.value); 
     calculate(); 
     } 
     }); 
     //show the loan amount initially 
     $(".loan-amount-value").val($(".loan-amount-slider").slider("value"));  
     //when the loan amount changes via user input.. 
     $("#loan-amount-value").change(function(event) { 
     //change the slider to that amount 
     $(".loan-amount-slider").slider("option", "value", inputValue); 
     }) 

    var dayInputValue = $("#days-value").val(); 

    $(".days-slider").slider({ 
    min: 1, 
    max: 45, 
    step: 1, 
    slide: function(event, ui) {  
     //update day when sliding day slider 
     $("#days-value").val(ui.value); 
     calculate(); 
     } 
     }); 
     //show the day initially 
     $("#days-value").val($(".days-slider").slider("value")); 

     //when the day via user input.. 
     $("#days-value").change(function(event) { 
     //change the slider to that amount 
     $(".days-slider").slider("option", "value", dayInputValue); 
     }); 

function calculate(){ 
    var days = $("#days-value").val(); 
    var amount = $(".loan-amount-value").val(); 
    var percent = .10; 
    var interest = (days * amount * percent)/10; 
    var total = parseInt(amount, 10) + parseInt(interest, 10); 
    $("#total-repay").val(total); 
    $("#interest-fees").val(interest); 
}; 

});   });