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

});   });