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

Question

问题出在行 total += parseInt($(el).val()); 如果例如parseInt($(el).val()) 保存值 200（我通过警报确认）设置为 Total 的值是 NaN。如果我删除 + 以便 total = parseInt($(el).val()); 那么 total 将 return 值 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>

Answer 1

删除箭头函数jquery准备就绪为我添加旧式作品

Answer 2

将 parseInt() 替换为 Number()

Answer 3

解决方案：

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

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

Strange += operater issue in Javascript/jQuery where NaN is being returned instead of numeric value

javascript

jquery

operators

nan