2

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

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

这是脚本的其余部分：

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

});         });
4

2 回答 2

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 示例

您可能还想calculate在其他滑块的滑动函数中添加调用，以便它们都进行计算。

于 2012-11-14T21:26:57.363 回答
0

Just make a call to calculate in the slide handlers.

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

});         });
于 2012-11-14T21:24:14.137 回答