JavaScript 返回 NaN 值

Question

我有两个 ui-slider，我有一个幻灯片回调的计算，但它返回 NaN 值

$( document ).ready(function() {  
  $("#amount").slider({
      range: "min",
      value: 160000,
      min: 10000,
      max: 400000,
      step: 1,
      slide: function(event, ui) {
        var interest = 0.0325;
        var amount = parseInt(ui.value);
        var temp1 = amount * (interest / 12) / (1 - Math.pow(1 + (interest / 12), -(years * 12)));
        $('#currentamount').val(amount);
        $('#monthly').text(Math.round(temp1));
      }
  });
  $("#years").slider({
      range: "min",
      value: 8,
      min: 1,
      max: 12,
      step: 1,
      slide: function(event, ui) {
        var interest = 0.0325;
       var years = parseInt(ui.value);
       var temp1 = amount * (interest / 12) / (1 - Math.pow(1 + (interest / 12), -(years * 12)));
       $('#yearsval').text(years);
       $('#monthly').text(Math.round(temp1));
      }
  });
});

我还做了一个 fiddle :http://jsfiddle.net/kristianladd/w0xayf7t/

之所以我把它放在它的滑动回调上，这样如果你滑动两者中的任何一个，它就会计算。

Answer 1

每当调用 slide 时，只需从其他 slider 读取状态:

$( document ).ready(function() {  
  $("#amount").slider({
      range: "min",
      value: 160000,
      min: 10000,
      max: 400000,
      step: 1,
      slide: function(event, ui) {
        var years = $('#years').slider("option", "value");
        var interest = 0.0325;
        var amount = parseInt(ui.value);
        var temp1 = amount * (interest / 12) / (1 - Math.pow(1 + (interest / 12), -(years * 12)));
        $('#currentamount').val(amount);
        $('#monthly').text(Math.round(temp1));
      }
  });
  $("#years").slider({
      range: "min",
      value: 8,
      min: 1,
      max: 12,
      step: 1,
      slide: function(event, ui) {
       var amount = $('#amount').slider("option", "value");
       var interest = 0.0325;
       var years = parseInt(ui.value);
       var temp1 = amount * (interest / 12) / (1 - Math.pow(1 + (interest / 12), -(years * 12)));
       $('#yearsval').text(years);
       $('#monthly').text(Math.round(temp1));
      }
  });
});