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

问题描述

问题在于行total += parseInt($(el).val());如果例如parseInt($(el).val())持有值 200（我通过警报确认），则设置为 Total 的值是 NaN。如果我删除 + ，total = parseInt($(el).val());那么 total 将返回值 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>

标签： javascriptjqueryoperatorsnan

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

问题描述

解决方案

推荐阅读