多个 jquery-ui 值滑块相互影响
Multiple jquery-ui value sliders affecting eachother
我正在尝试使用 3 个 jquery-ui 滑块进行贷款计算。
参数为:
借款金额
期限/还款月数
利率
在更改滑块时,我想显示以下值:
-
月金额 + 利率
(贷款金额/月数=结果+(结果*利率)) -
贷款总额 + 总利率.
(总贷款金额+(贷款总额*利率))
目前我只有滑块,但我还没有设法将它们连接在一起来计算和显示这些值。非常感谢您的帮助。
这是一个小提琴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" ) );
});
目录:
<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>
理想情况下,这将通过像 Angular 这样的数据绑定库来处理,但您可以在加载时进行计算,并在每个滑块的 slide 方法中进行计算,如下所示:
网页更改:
<!-- 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/
相关文章:
- jQuery UI自动完成突然停止工作
- Rails/JSON:如何将JSON用于jquery UI自动完成表单
- 停止jQuery UI滑块移动超过给定值
- Jquery UI自动完成无法工作
- jquery ui滑块上的滑块值
- jQuery UI可排序-多连接列表拖动
- 使用Jquery ui时滑块无法工作
- JQuery UI可拖动潜水与滚动棒到鼠标
- jQuery UI自动完成-修改问题
- JQuery UI日期选择器:在选择出发日期时自动弹出返回日期
- 阻止选项卡缓存jquery ui
- 将jQuery UI Timepicker Addon与React一起使用
- 如何在页面重新加载时显示jquery ui对话框
- jquery ui自动完成导致标头错误
- jquery UI draggable:UI.children不是一个函数
- 使用 jQuery UI 选项卡拆分表单是否会影响表单发布到 PHP
- jQuery Bounce 对点击没有 jQuery UI 的影响
- 如何在不影响其他值的情况下使jquery ui中的日期选择器禁用sunday
- jQuery UI的可拖动位置是否受到scrollTop的影响?(包括JSFiddle)
- 多个 jquery-ui 值滑块相互影响