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

});         });

jQuery UI滑块计算

2 个答案: