javascript - 多个 jquery-ui 值滑块相互影响

Question

我正在尝试使用 3 个 jquery-ui 滑块进行贷款计算。

参数是：

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

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

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

理想情况下，这将通过像 Angular 这样的数据绑定库来处理，但是您可以在加载时以及在每个滑块的 slide 方法中进行计算，所以像这样：

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/