2

我正在尝试使用 3 个 jQuery noUiSliders 进行贷款计算。

参数为：

借入金额
期限/还款月数
利率

在更改滑块时，我想显示以下值：

每月金额+利率（贷款金额/月数=结果+（结果*利率））

贷款总额+总利率。(贷款总额+(贷款总额*利率))

目前我只有滑块，但我还没有设法将它们连接在一起来计算和显示这些值。非常感谢您的帮助。

这是小提琴http://jsfiddle.net/w5wxw9se/4/


Javascript

  $('#slider-amount').noUiSlider({
   start: [ 5000 ],
   step: 5000,
   range: {
       'min': [  5000 ],
       'max': [ 400000 ]
   },
  });




 $('#slider-duration').noUiSlider({
   start: [ 1 ],
   step: 1,
   range: {
       'min': [  1 ],
       'max': [ 12 ]
   }
  });

  $('#slider-rate').noUiSlider({
     start: [ 1.6 ],
     step: 0.05,
     range: {
       'min': [  1 ],
       'max': [ 23 ]
     }
   });






 $('#slider-amount').Link('lower').to($('#slider-amount-value'));
 $('#slider-duration').Link('lower').to($('#slider-duration-value'));
 $('#slider-rate').Link('lower').to($('#slider-rate-value'));



HTML： 

<div id="slider-container" style="width:400px;">

         <div id="slider-amount"></div>
         <span class="example-val" id="slider-amount-value"></span><br />

         <br />

         <div id="slider-duration"></div>
         <span class="example-val" id="slider-duration-value"></span><br />

         <br />

         <div id="slider-rate"></div>
         <span class="example-val" id="slider-rate-value"></span><br />


        <br /><br />

    <p>To pay monthly (interest rate included): <span id="to-pay-monthly"></span></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): <span id="pay_all_months"></span></p>
    <span style="font-size:11px;">Total loan amount + (total loan amount * interest rate)</span>

</div>
4

1 回答 1

1

每个滑块也接受这样的回调

$('el').noUiSlider(...).Link('lower').to(...., handler);

处理程序将接收三个参数

函数滑块处理程序（值，句柄，滑块）{}

使用上面你可以做这样的事情

var total = 0,
  total2 = 0,
  amount = 0,
  duration = 0,
  roi = 0,
  topayMnthlyContainer = $("#to-pay-monthly"),
  payAllMonths = $("#pay_all_months");
$('#slider-amount').noUiSlider({
  start: [5000],
  step: 5000,
  range: {
    'min': [5000],
    'max': [400000]
  },
}).Link('lower').to($('#slider-amount-value'), amountHandler);
$('#slider-duration').noUiSlider({
  start: [1],
  step: 1,
  range: {
    'min': [1],
    'max': [12]
  }
}).Link('lower').to($('#slider-duration-value'), durationHandler);
$('#slider-rate').noUiSlider({
  start: [1.6],
  step: 0.05,
  range: {
    'min': [1],
    'max': [23]
  }
}).Link('lower').to($('#slider-rate-value'), roiHandler);

function amountHandler(value, handle, slider) {
  amount = +value;
  calculateTotal();
}

function durationHandler(value, handle, slider) {
  duration = +value;
  calculateTotal();
}

function roiHandler(value, handle, slider) {
  roi = +value;
  calculateTotal();
}

function calculateTotal() {
  // total = amount + duration
  total = amount / duration * (1 + (roi * .01));
  total2 = amount + (duration * roi * .01);
  topayMnthlyContainer.text(total);
  payAllMonths.text(total2);
}

这是一个演示http://jsfiddle.net/dhirajbodicherla/w5wxw9se/9/

于 2015-06-22T14:22:40.197 回答