2

1ページに2つのスライダーがあり、1つは日数を制御し、もう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);  
};

});         });
4

2 に答える 2

1

Your calculate() function is wrapped incorrectly. Change it to:

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

You might also want to add a call to calculate in your other slider's slide function so they both do the calculation.

于 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 に答える