影響海誓山盟的多個jquery-ui值滑塊

Question

我正在嘗試使用3個jquery-ui滑塊進行貸款計算。

的參數是：

金額借用個月的
時間/金額償還
利率

而改變滑動RS我想顯示的值：

1. 月量+利率
   （摺合個月的貸款/數量=結果+（結果*利率））

2. 貸款總額+總利率。
   （貸款總額+（總貸款額*利率））

目前我只有滑塊，但我沒有設法將它們連接在一起，以計算和顯示這些值。非常感謝您的幫助。

這裏有一個小提琴 http://jsfiddle.net/L65u9spv/

的Javascript：

$(function() { 

    $("#slider-toloan").slider({ 
     range: "min", 
     value: 25000, 
     min: 5000, 
     max: 400000, 
     step: 5000, 
     slide: function(event, ui) { 
     $("#amount").val("$" + ui.value); 
     } 
    }); 

    $("#amount").val("$" + $("#slider-toloan").slider("value")); 


    $("#slider-loanduration").slider({ 
     range: "min", 
     value: 5, 
     min: 1, 
     max: 25, 
     step: 1, 
     slide: function(event, ui) { 
     $("#duration").val(ui.value); 
     } 
    }); 


    $("#duration").val($("#slider-loanduration").slider("value")); 



    $("#slider-rate").slider({ 
     range: "min", 
     value: 1.85, 
     min: 1.75, 
     max: 23, 
     step: 0.05, 
     slide: function(event, ui) { 
     $("#rate").val(ui.value); 
     } 
    }); 


    $("#rate").val($("#slider-rate").slider("value")); 
    }); 

HTML：

<p> 
       <label for="amount">Amount to Loan:</label> 
       <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;"> 
      </p> 

      <div id="slider-toloan"></div> 


      <p> 
       <label for="duration">Duration Months:</label> 
       <input type="text" id="duration" readonly style="border:0; color:#f6931f; font-weight:bold;"> 
      </p> 

      <div id="slider-loanduration"></div> 

      <p> 
       <label for="rate">Interest Rate</label> 
       <input type="text" id="rate" readonly style="border:0; color:#f6931f; font-weight:bold;"> 
      </p> 

      <div id="slider-rate"></div> 


       <br /><br /> 
       <p>To pay monthly (interest rate included): ?</p> 
       <span style="font-size:11px;">amount to loan/amount of months = result + (result * interest rate) </span> 
       <br /> 
       <p>Total amount to pay all months (interest rate included): ?</p> 
       <span style="font-size:11px;">Total loan amount + (total loan amount * interest rate)</span> 

Answer 1

理想的情況下，這將通過像角數據綁定庫來處理，但是你可以做負載的計算，併爲每個滑塊滑動的方法，所以是這樣的：

HTML變化：

<!-- Add spans with id's so you can change the contents later --> 
<p>To pay monthly (interest rate included): <span id="to-pay-monthly"></span></p> 
<p>Total amount to pay all months (interest rate included): <span id="pay_all_months"></span></p> 

的Javascript的變化：

$("#slider-toloan").slider({ 
    range: "min", 
    value: 25000, 
    min: 5000, 
    max: 400000, 
    step: 5000, 
    slide: function(event, ui) { 
    $("#amount").val("$" + ui.value); 

    //here you do the calculation for both values since the total amount affects both calculations 
    $("#to-pay-monthly").text(ui.value/$("#slider-loanduration").slider("option","value") * (1 + ($("#slider-rate").slider("option","value") * .01))); 
    $("#pay_all_months").text(ui.value + (ui.value * $("#slider-rate").slider("option","value") * .01)); 
    } 
}); 

$("#slider-loanduration").slider({ 
    range: "min", 
    value: 5, 
    min: 1, 
    max: 25, 
    step: 1, 
    slide: function(event, ui) { 
    $("#duration").val(ui.value); 

    //here, the duration only affects one calculation, no need to recalculate the other 
    $("#to-pay-monthly").text($("#slider-toloan").slider("option","value")/ui.value * (1 + ($("#slider-rate").slider("option","value") * .01))); 
    } 
}); 

$("#slider-rate").slider({ 
    range: "min", 
    value: 1.85, 
    min: 1.75, 
    max: 23, 
    step: 0.05, 
    slide: function(event, ui) { 
    $("#rate").val(ui.value); 

     //this value also affects both calculations 
     $("#pay_all_months").text($("#slider-toloan").slider("option","value") + ($("#slider-toloan").slider("option","value") * ui.value * .01)); 
     $("#to-pay-monthly").text($("#slider-toloan").slider("option","value")/$("#slider-loanduration").slider("option","value") * (1 + ($("#slider-rate").slider("option","value") * .01))); 
    } 
}); 

//then do both calculations on page load 
$("#pay_all_months").text($("#slider-toloan").slider("option","value") + ($("#slider-toloan").slider("option","value") * $("#slider-rate").slider("option","value") * .01)); 
$("#to-pay-monthly").text($("#slider-toloan").slider("option","value")/$("#slider-loanduration").slider("option","value") * (1 + ($("#slider-rate").slider("option","value") * .01))); 

我叉你撥弄我的工作代碼：http://jsfiddle.net/fnurvdt5/