jQuery 在简单计算中返回 NaN

Posted 2023-03-11

【中文标题】jQuery 在简单计算中返回 NaN

【英文标题】：jQuery returns NaN on simple calculation

【发布时间】：2012-10-08 05:39:13

【问题描述】：

我有以下脚本。当我最初编写它时，它运行良好。然后我加载了页面，它已经损坏并永久返回NaN。我能够在控制台中成功运行它，但由于某种原因它无法在站点上正常运行。它在 Rails 应用程序内部运行。

$(document).ready(function()
  $('select').click(function()
    var often = parseInt($('#biohaz_frequency_often').val());
    var time = parseInt($('#biohaz_frequency_time').val());
    var timeoften = often * time
    if(timeoften == 0)
      var freq = 0;
    
    else if(timeoften <= 2)
      var freq = 1;
    
    else if(timeoften <= 4)
      var freq = 3;
    
    else if(timeoften <= 9)
      var freq = 6;
    
    else if(timeoften > 9)
      var freq = 10;
    
    var sever = parseInt($('#biohaz_risk_severity').val());
    var master = parseInt($('#biohaz_risk_mastery').val());
    $('#risk_frequency').html(freq);
    $('#risk_total').html(freq * sever * master);
  )
)

【问题讨论】：

你能创建一个 jsFiddle 或者提供它的 HTML 吗？

var timeoften = often * time 后面少了一个分号。

【参考方案1】：

运行此诊断：

$(document).ready(function()
  $('select').click(function()
    var often = parseInt($('#biohaz_frequency_often').val());
    var time = parseInt($('#biohaz_frequency_time').val());
    var sever = parseInt($('#biohaz_risk_severity').val());
    var master = parseInt($('#biohaz_risk_mastery').val());
    alert([often, time, sever, master].join());
  );
);

这会告诉你四个变量中哪个是 NaN。

另外（这可能很重要），$('select').click(...) 是相当不寻常的。我希望看到$('select').on('change', ...)。使用click，您的 NaN 更有可能是非数字进入计算的结果。如果没有看到 HTML，我无法确定。

最好的策略是确保所有四个选择元素都被初始化（在 HTML 中）并选择了一个有效的选项，然后代码如下：

$(document).ready(function()
    //cache of static jQuery objects
    var $$ = 
        'often':     $('#biohaz_frequency_often'),
        'time':      $('#biohaz_frequency_time'),
        'sever':     $('#biohaz_risk_severity'),
        'master':    $('#biohaz_risk_mastery'),
        'frequency': $('#risk_frequency'),
        'total':     $('#risk_total')
    ;
    $('select').on('change', function()
        var often = parseInt($$.often.val()),
            time = parseInt($$.time.val()),
            sever = parseInt($$.sever.val()),
            master = parseInt($$.master.val()),
            ot = often * time,//keep this member name short, it's about to be used 4 times in the next line
            freq = (ot == 0) ? 0 : (ot <= 2) ? 1 : (ot <= 4) ? 3 : (ot <= 9) ? 6 : 10;
        $$.frequency.html(freq);
        $$.total.html(freq * sever * master);
    ).trigger('change');//call the handler immediately, with initially selected options
);

【讨论】：

我运行了该诊断程序，它们都返回 0,0,0,0。我将尝试按照您的建议使用 on('change') 我很新，这看起来是一个更好的方法。我真的很感激帮助。第一次在这里提问。它得到了回报。

工作就像一个魅力。感谢您帮助我解决这个问题！

别担心，快乐都是我的。你应该看到一个按钮或链接反对我的答案，让你接受它......这是一件好事。

【参考方案2】：

我刚刚根据 benny 的回答和一秒前已删除的答案为您整理了一个简单的 jsfiddle 示例 - 它似乎有效：

http://jsfiddle.net/Qr5eF/1/

如果您可以提供自己的 html 来帮助您找到答案。

编辑：更新为新的 jsfiddle，因为我在原始文件中输入了两个 id。糟糕！

【讨论】：

老实说，如果这是由var master = parseInt($('#biohaz_risk_mastery').val()); 行上的拼写错误引起的，我不会感到惊讶 - #biohaz_risk_mastery 应该是 #biohaz_risk_master 吗？