jQuery UI slider 计算

Question

我在页面上有 2 个 slider ，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);  
};

但它仅在页面加载时才起作用。我需要它在 slider 更改时更新。我知道每次 slider 更改时都需要调用计算函数，但我只是不确定如何编写它。这可能吗？

这是脚本的其余部分:

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

您可能还想在其他 slider 的幻灯片函数中添加对calculate 的调用，以便它们都进行计算。