Question

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

我似乎无法弄清楚为什么标签中显示给用户的值是正确的（IE滑块一直向左，它显示5000，当它一直向右时它显示500000），但传递给贷款计算的价值总是5000折。

# 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，直到然后我改变了这个词。

Answer 1

滑块更改时会发生

Slide事件，因此您需要在停止前验证值。我认为这是一个非常小的延迟，导致价值不会传递到您的计算贷款功能。你有几个解决方案，也许最干净的是添加一个stop事件，以确保你在停止时获得价值。但你也可以设置超时。停止事件的示例：

＆＃13;

$(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, ","));
  }
})

＆＃13;

<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>

＆＃13;

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

1 个答案: