如何阻止jQuery总价计算中的数值变为NaN

我来帮你搞定这个问题！当你把商品数量减到0的时候，代码里执行了tot / quant，而此时quant是0，tot也是0（因为0乘以价格），0除以0就会得到NaN，这就导致总价变成NaN了。

接下来，我们可以优化总价的计算逻辑——不要每次只加减当前商品的单价，而是每次重新计算所有商品的总价，这样既避免了除法的问题，逻辑也更清晰，不容易出错。

改进后的JavaScript代码 #

window.onload = function() {
    // 定义计算总价的函数，复用逻辑
    function calculateTotal() {
        let total = 0;
        // 遍历所有数量输入框（id为偶数的input）
        $('input').filter(function() {
            return parseInt($(this).attr('id')) % 2 === 0;
        }).each(function() {
            const quant = parseInt($(this).val());
            const priceId = parseInt($(this).attr('id')) - 1;
            const price = parseFloat($('#' + priceId).val());
            // 计算当前商品的小计，并累加到总价
            total += quant * price;
            // 更新当前商品的小计显示
            $('#result' + priceId).html((quant * price).toFixed(2) + '€');
        });
        // 更新总价显示，确保如果总价为0也显示0而不是NaN
        $('#total').html('Total : ' + total.toFixed(2) + '€');
    }

    $('.add').click(function() {
        const quantityInput = $(this).prev();
        let currentVal = parseInt(quantityInput.val());
        if (currentVal < 99) {
            quantityInput.val(currentVal + 1);
            calculateTotal(); // 重新计算总价
        }
    });

    $('.sub').click(function() {
        const quantityInput = $(this).next();
        let currentVal = parseInt(quantityInput.val());
        if (currentVal > 0) {
            quantityInput.val(currentVal - 1);
            calculateTotal(); // 重新计算总价
        }
    });

    // 初始化总价显示
    calculateTotal();
};

关键修改点说明 #

• 提取了calculateTotal函数，每次点击+/-按钮后都重新计算所有商品的总价，彻底避免了局部加减时的除法错误
• 当数量为0时，quant * price就是0，直接累加到总价不会产生NaN
• 用parseInt和parseFloat确保数值类型正确，避免字符串运算的潜在问题
• 页面加载时就调用calculateTotal，确保初始状态下总价显示正确（为0）

对应的HTML部分（无需修改） #

<script data-require="jquery@3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<div id="total"></div>
<div class="main">
  <table>
    <tr>
      <td align="center">Description</td>
      <td align="center">Price</td>
      <td align="center">Quantity</td>
    </tr>
    <tr>
      <td>Article 1</td>
      <td><input type="text" hidden="true" value="2.5" id="1">2.50€</td>
      <td>
        <div class="quantity buttons_added">
          <button type="button" id="sub" class="sub">-</button>
          <input type="number" id="2" value="0" min="0" max="3" />
          <button type="button" id="add" class="add">+</button>
        </div>
      </td>
      <td>
        <div id="result1"></div>
      </td>
    </tr>
    <tr>
      <td>Article 2</td>
      <td><input type="text" hidden="true" value="1" id="3">1.00€</td>
      <td>
        <div class="quantity buttons_added">
          <button type="button" id="sub" class="sub">-</button>
          <input type="number" id="4" value="0" min="0" max="3" />
          <button type="button" id="add" class="add">+</button>
        </div>
      </td>
      <td>
        <div id="result3"></div>
      </td>
    </tr>
    <tr>
      <td>Article 3</td>
      <td><input type="text" hidden="true" value="3.8" id="5">3.80€</td>
      <td>
        <div class="quantity buttons_added">
          <button type="button" id="sub" class="sub">-</button>
          <input type="number" id="6" value="0" min="0" max="3" />
          <button type="button" id="add" class="add">+</button>
        </div>
      </td>
      <td>
        <div id="result5"></div>
      </td>
    </tr>
    <tr>
      <td>Article 4</td>
      <td><input type="text" hidden="true" value="1" id="7">1.00€</td>
      <td>
        <div class="quantity buttons_added">
          <button type="button" id="sub" class="sub">-</button>
          <input type="number" id="8" value="0" min="0" max="3" />
          <button type="button" id="add" class="add">+</button>
        </div>
      </td>
      <td>
        <div id="result7"></div>
      </td>
    </tr>
  </table>
</div>

现在你可以测试一下，把任何商品数量减到0，总价都会保持正确的数值，不会变成NaN啦！

内容的提问来源于stack exchange，提问作者Pierre Loye