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));
      }
  });
});

我也做了一个小提琴：http://jsfiddle.net/kristianladd/w0xayf7t/

我把它放在幻灯片回调上的原因是，如果你滑动其中任何一个，它就会计算出来。

Answer 1

您需要在回调之外定义years和amount：

$( document ).ready(function() { 
  var years = 8;
  var amount = 160000;
  $("#amount").slider({
      range: "min",
      value: 160000,
      min: 10000,
      max: 400000,
      step: 1,
      slide: function(event, ui) {
        var interest = 0.0325;
        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;
       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));
      }
  });
});

JSfiddle：http://jsfiddle.net/w0xayf7t/2/

Answer 2

只要调用幻灯片，只需从其他滑块读取状态：

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

Answer 3

在一个回调中定义amount，在另一个回调中定义years，但在两个回调中都使用这两个变量。

这就是你获得NaN的原因，因为并非所有变量都被定义了。

Answer 4

年份和金额必须在外面宣布。

    $(document).ready(function () {
  var amount = 160000;
  var years = 8;
  $("#amount").slider({
    range: "min",
    value: 160000,
    min: 10000,
    max: 400000,
    step: 1,
    slide: function (event, ui) {
      var interest = 0.0325;
      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;
      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));
    }
  });
});

JSFiddle：https://jsfiddle.net/w0xayf7t/3/

Answer 5

var temp1 = amount * (interest / 12) / (1 - Math.pow(1 + (interest / 12), -(years * 12)));

此范围内不存在变量years。

var temp1 = amount * (interest / 12) / (1 - Math.pow(1 + (interest / 12), -(years * 12)));

此范围内不存在变量amount。

因此，如果您想使用变量years和amount进行计算，我认为您应该将它们移到全局范围。或者在内部滑块中，您可以从元素中获取值years或amount，但这不完全是例如：https://jsfiddle.net/thaopv/e28rf6sd/

祝你好运。

Answer 6

temp1正在使用amount和years进行计算。为了正常工作，你必须使它全局化。由于这是两个回调的通用代码，因此最好将其作为单独的函数提取。简单地

function setMonthly() {
    var interest = 0.0325,
        amount = parseInt($('#currentamount').val()),
        years = parseInt($('#yearsval').html()),
        ans = amount * (interest / 12) / (1 - Math.pow(1 + (interest / 12), - (years * 12)));
    $('#monthly').text(Math.round(ans));
}

并从每个幻灯片回调中调用此函数。请参阅更新的小提琴http://jsfiddle.net/w0xayf7t/4/

JavaScript返回NaN值

6 个答案: