使用jQuery Slider传递不正确值的贷款计算器

debugcn 发表于 Dev

Questifer

我有一个使用jQuery UI滑块元素的贷款计算器。当滑块移动时，我会在标签中向用户显示该值。但是，我也使用该值来计算其他值，例如每月还款等。

我似乎无法弄清楚为什么在标签中向用户显示的值是正确的（即，当滑块一直向左移动时，它显示5000，而当滑块一直向右时，它显示500000），但是传递到贷款计算中的值始终是5000 off。

# JS
function computeLoan() {
  var amount = $('#slider1').slider('value');
  var months = parseInt(document.getElementById('months').value);
  var completionFee = 0;
  var interest_rate = 0.06;
  var monthly_interest_rate = interest_rate / 12;
  var payment = amount * (monthly_interest_rate * (Math.pow(1 + monthly_interest_rate, months))) / (Math.pow(1 + monthly_interest_rate, months) -1);
  monthly_payment = payment.toFixed(2);
  document.getElementById('afterCompletion').innerHTML = "$"+amountMinusCompletion.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  document.getElementById('payment').innerHTML = "$"+monthly_payment.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  payable = parseInt(monthly_payment * months).toFixed(2);
  document.getElementById('payable').innerHTML = "$"+payable.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
$('#slider1').slider({
  min: 5000,
  max: 500000,
  step: 5000,
  slide: function(event, ui)
    {
      $('#slider1-value').text("$"+ui.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
      computeLoan();
    }
});

# HTML
<select class="form-control" id="months" onchange="computeLoan()">
    <option value="6" selected>6 Months</option>
    <option value="12">12 Months</option>
    <option value="18">18 Months</option>
    <option value="24">24 Months</option>
    <option value="36">36 Months</option>
    <option value="48">48 Months</option>
    <option value="60">60 Months</option>
</select>

<label for="" class="col-md-6 control-label color-purple" id="slider1-value"></label>

当我使用选择字段更改表单上的值时，会从滑块中提取正确的值并在计算中使用，但是在不更改选择字段中的项的情况下滑动滑块时，它会关闭5000，直到我更改术语。

朱利安·格雷戈尔

Slide滑块更改时发生事件，因此您在停止之前先验证值。我想会有一个非常非常小的延迟，导致该值不传递到您的计算借贷函数中。您有几种解决方案，也许最干净的方法是添加一个stop事件，以确保停止时获取值。但是您也可以设置超时时间。停止事件的示例：

$(document).ready(function() {
  $('#slider1').slider({
    min: 5000,
    max: 500000,
    step: 5000,
    slide: function(event, ui) {
      $('#slider1-value').text("$" + ui.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
      computeValue()

    },
    stop: function(event, ui) {
      $('#slider1-value').text("$" + ui.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
      computeValue();

    }
  });

  function computeValue() {
    var amount = $('#slider1').slider('value');
    $('#slider1-computedvalue').text(amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
  }
})

<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div id='slider1'></div>
<div id='slider1-value'></div>
<div id='slider1-computedvalue'></div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。