Javascript/jQuery 中奇怪的 += 运算符问题，其中返回的是 NaN 而不是数值答案

【问题标题】：Strange += operater issue in Javascript/jQuery where NaN is being returned instead of numeric valueJavascript/jQuery 中奇怪的 += 运算符问题，其中返回的是 NaN 而不是数值
【发布时间】：2021-10-16 19:42:08
【问题描述】：

问题在于 total += parseInt($(el).val()); 行，例如parseInt($(el).val()) 持有值 200（我通过警报确认）设置为 Total 的值是 NaN。如果我删除 + 以便 total = parseInt($(el).val()); 那么总将返回值 200 而不是 NaN。谁能看到导致此 NaN 问题的原因？谢谢

jQuery($ => {
  $('#courses').on('change', e => {
    $('#targetPane').load(e.target.value);
    path = (e.target.value);
    //open callback function
    $('#targetPane').load('path', function() {
      //open callback contents 
      function getTotal() {
        var total = 0;
        $("input, select").each(function(i, el) {
          if ($(el).is("input:checked")) {
            $($(el).data("rel")).show();
            total += parseInt($(el).val());
            alert("total=" + total);
          } else {
            $($(el).data("rel")).hide();
          }
          if ($(el).is("select")) {
            if ($(el).val() !== "0") {
              $($(el).data("rel")).html($(el).val()).show();
              total += parseInt($(el).val());
            }
          }
        });
        return total;
      }
      $('input[type="checkbox"], select').change(function() {
        //$(document).on('change', 'input', 'select', function() {
        $("#sum").text(getTotal());
      });

      //close callback contents   
    }); //close callback function
  });
}); //close jQuery

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>jQuery.load Test</title>
  <link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/grid/">
  <link href="https://getbootstrap.com/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <link href="https://getbootstrap.com/docs/5.0/examples/grid/grid.css" rel="stylesheet">
</head>

<body class="py-4">
  <main>
    <div class="container">
      <div class="row mb-3">
        <select name="myCourses" id="courses" autocomplete="off">
          <option value="" selected>Select</option>
          <option value="includes/inc_1_working.html">Load inc_1.html</option>
          <!-- assume more dropdown options -->
        </select>
        <!-- load include file here -->
        <div id="targetPane"></div>
      </div>
      <!--close row-->
    </div>
    <!-- close container -->
  </main>
</body>

</html>

加载到以下文件中：includes/inc_1_working.html

<table width="100%" id="form1">
  <tr><div id="test"></div>
    <td>
      <label>
        <input type="checkbox" name="colorCheckbox" id="n1" value="200" data-rel="div.n1"> Show Price1
      </label>
    </td>
    <td>
      <div class="n1 box">200</div>
    </td>
  </tr>
  <tr>
    <td>
      <label>
        <input type="checkbox" name="colorCheckbox" id="n2" value="200" data-rel="div.n2"> Show Price
      </label>
    </td>
    <td>
      <div class="n2 box">200</div>
    </td>
  </tr>
  <tr>
    <td>
      <label>
        <input type="checkbox" name="colorCheckbox" id="n3" value="200" data-rel="div.n3"> Show Price
      </label>
    </td>
    <td>
      <div class="n3 box">200</div>
    </td>
  </tr>
  <tr>
    <td>
      <label>
        <select id="n4" data-rel="div.n4">
          <option value="0" selected>Choose...</option>
          <option value="10">item 1</option>
          <option value="20">item 2</option>
        </select>
      </label>
    </td>
    <td>
      <div class="n4"></div>
    </td>
  </tr>
  <tr>
    <td>
      <label>
        <select id="n5" data-rel="div.n5">
          <option value="0" selected>Choose...</option>
          <option value="3">item 1</option>
          <option value="4">item 2</option>
        </select>
      </label>
    </td>
    <td>
      <div class="n5"></div>
    </td>
  </tr>
  <tr>
    <td> Total: </td>
    <td>
      <div id='sum'>0</div>
    </td>
  </tr>
</table>

【问题讨论】：

如果您要添加到 total 的值中只有一个是空字符串，则 parseInt('') 将返回 NaN ...一旦 total 是 NaN 再添加也不会解决它 - 试试total += parseInt($(el).val()) || 0;
谢谢total += parseInt($(el).val()) || 0; 不是吗。 NaN 从if ($(el).is("select")) { 下的total += parseInt($(el).val()); 开始，因此选择下拉列表中的值之间存在冲突。我想知道我可以在那个 getTotal 函数中使用 (#mySelect select) 来定位一个选择。我正在使用该页面上的选择下拉列表来加载文件，并且我在加载的文件includes/inc_1_working.html - jQuery .load() 中使用选择下拉列表
嗯？我说你应该只把|| 0 放在一个地方吗？不...两个地方都可以
您的 HTML 中没有复选框。它们都有数值吗？
"NaN 开始于 total += parseInt($(el).val());" ......所以......就像我说的那样，让它total += parseInt($(el).val()) || 0;

标签： javascript jquery operators nan

【解决方案1】：

解决方案：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>jQuery.load Test</title> 
    <link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/grid/">
    <link href="https://getbootstrap.com/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
            
        jQuery($ => {
                            $('#courses').on('change', e => {
                                $('#targetPane').load(e.target.value);
                                path = (e.target.value);
                                //open callback function
                                   $('#targetPane').load('path', function(){
                                     //open callback contents 
                                    
                                    //hide all values
                                     $("#targetPane input, #targetPane select").each(function(i, el) {
                                        $($(el).data("rel")).hide();
                                    });
                                     
                                    function getTotal() {
                                        
                                            var total = 0;
                                            $("#targetPane input, #targetPane select").each(function(i, el) {
                                                
                                            if ($(el).is("input:checked")) {
                                                $($(el).data("rel")).show();
                                                total += parseInt($(el).val());
                                                
                                            } else {
                                                $($(el).data("rel")).hide();
                                            }
                                            if ($(el).is("select")) {
                                                if ($(el).val() !== "0") {
                                                $($(el).data("rel")).html($(el).val()).show();
                                                total += parseInt($(el).val());
                                                
                                                }
                                            }
                                            });
                                            
                                            return total;
                                            
                                        }

                                        $('select #courses').change(function() {
                                            $($(el).data("rel")).hide(getTotal());
                                        });

                                        $('#targetPane input[type="checkbox"], #targetPane select').change(function() {
                                        //$(document).on('change', 'input', 'select', function() {
                                        $("#sum").text(getTotal());
                                        });
                                    
                                       //close callback contents   
                                   }); //close callback function
                            });  
                        }); //close jQuery
    </script>
    <link href="https://getbootstrap.com/docs/5.0/examples/grid/grid.css" rel="stylesheet">
  </head>
  <body class="py-4">
    <main>
      <div class="container">
                <div class="row mb-3">
                <select name="myCourses" id="courses" autocomplete="off">
                    <option value="0" selected>Select</option>
                    <option value="includes/inc_1_working.html">Load inc_1.html</option>
                    <!-- assume more dropdown options -->
                </select>
                <!-- load include file here -->
                <div id="targetPane"></div>
                </div>  <!--close row-->      
        </div> <!-- close container -->
    </main>
  </body>
</html>

【讨论】：

【解决方案2】：

将 parseInt() 替换为 Number()

【讨论】：

【解决方案3】：

删除箭头功能 jquery 就绪为我添加旧式工作

【讨论】：