防止值更改为 NaN答案

【问题标题】：Preventing a value to change to NaN防止值更改为 NaN
【发布时间】：2019-09-19 23:20:00
【问题描述】：

我在使用 JQuery 时遇到了关于我的总 div 的问题。

其实这个 div 在点击 + 或 - 按钮时会改变值，实际上效果很好。

我的问题是，当我在扩充一个值后将其“重置”为 0 时，一旦该值变为 0，我的总数就等于 NaN，我希望它保持在 0 以继续计算总数我的其他价值观。

window.onload = function() {

  var ids = new Array();
  $('input').each(function() {
    ids.push($(this).attr("id"));


  });

  var total = 0;

  $('.add').click(function() {
    var quant, idprev, price, tot;

    if ($(this).prev().val() < 99) {
      $(this).prev().val(+$(this).prev().val() + 1);

      quant = ($(this).prev().val());
      idprev = ($(this).prev().attr('id') - 1);
      price = $("#" + idprev).val();
      tot = quant * price;

      $("#result" + idprev).html(tot.toFixed(2) + "€");

      for (var i = 0; i < ids.length; i++) {
        if (ids[i] % 2) {
          total = total + (tot / quant);
          $("#total").html("Total : " + total.toFixed(2) + "€");
        } else {
          return false;
        }
      }
    }
  });

  $('.sub').click(function() {
    var quant, idprev, price, tot;
    if ($(this).next().val() > 0) {
      if ($(this).next().val() > 0)
        $(this).next().val(+$(this).next().val() - 1);

      quant = ($(this).next().val());
      idprev = idprev = ($(this).next().attr('id') - 1);
      price = $("#" + idprev).val();
      tot = quant * price;

      $("#result" + idprev).html(tot.toFixed(2) + "€");

      for (var i = 0; i < ids.length; i++) {
        if (ids[i] % 2) {
          total = total - (tot / quant);
          $("#total").html("Total : " + total.toFixed(2) + "€");
        } else {
          return false;
        }

      }

    }
  });
}

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

提前致谢:)

【问题讨论】：

如果将单个值（作为单个行）以及最终结果打印到控制台会发生什么？其中一个可能不是字符串或数字。
每个值都打印为数字，显然当我尝试执行total = total - (tot / quant); 并推送时 - 当总计为 1 时，总计重置为 0，然后该值变为 NaN。
total = total - (tot / quant); 是问题所在，当数量达到 0 时查看该公式时，您执行：total = 2.5 - ( 0/0) 这是不允许的除以零
Best way to prevent/handle divide by 0 in javascript的可能重复

标签： jquery html

【解决方案1】：

试试：

$("#total").html("Total : " + (+total || 0).toFixed(2) + "€");

此代码使用 + 号转换变量总数，如果为 null 或 NaN 则用 || 替换为 0逻辑或。这样 .toFixed() 方法总是有一个数字可以使用。

【讨论】：

【解决方案2】：

正如其他人所指出的那样，问题是因为当行总数和数量都为零时，您将除以零。

但是您应该注意，您的解决方案比它需要的复杂得多，并且导致问题的部门完全是多余的。

通过删除唯一的id 属性（这消除了对循环/数组和模运算符的需要）以及在所有元素上使用公共类，可以将逻辑干掉并使其更具可扩展性。试试这个：

window.addEventListener('load', function() {
  $('.change-quantity').click(function() {
    var amount = $(this).data('amount');
    var $quantity = $(this).siblings('.quantity').val(function(i, v) {
      v = +v || 0;
      return Math.max(0, v < 99 && v >= 0 ? v + amount : v);
    });
    updateRowTotal($quantity.closest('tr'));
    updateOverallTotal();
  });
  
  function updateRowTotal($row) {
    $row.find('.result').text(function() {
      return ((+$row.find('input.quantity').val() || 0) * (+$row.find('input.price').val() || 0)).toFixed(2) + '€';
    });
  }
  
  function updateOverallTotal() {
    var total = 0;
    $('.result').each(function() {
      total += parseFloat($(this).text()) || 0;
    });
    $('#total').text(total.toFixed(2) + '€');
  }
});

<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">0.00€</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" class="price">2.50€</td>
      <td>
        <div class="quantity buttons_added">
          <button type="button" class="change-quantity" data-amount="-1">-</button>
          <input type="number" class="quantity" value="0" min="0" max="3" />
          <button type="button" class="change-quantity" data-amount="1">+</button>
        </div>
      </td>
      <td>
        <div class="result"></div>
      </td>
    </tr>
    <tr>
      <td>Article 2</td>
      <td><input type="text" hidden="true" value="1" class="price">1.00€</td>
      <td>
        <div class="quantity buttons_added">
          <button type="button" class="change-quantity" data-amount="-1">-</button>
          <input type="number" class="quantity" value="0" min="0" max="3" />
          <button type="button" class="change-quantity" data-amount="1">+</button>
        </div>
      </td>
      <td>
        <div class="result"></div>
      </td>
    </tr>
    <tr>
      <td>Article 3</td>
      <td><input type="text" hidden="true" value="3.8" class="price">3.80€</td>
      <td>
        <div class="quantity buttons_added">
          <button type="button" class="change-quantity" data-amount="-1">-</button>
          <input type="number" class="quantity" value="0" min="0" max="3" />
          <button type="button" class="change-quantity" data-amount="1">+</button>
        </div>
      </td>
      <td>
        <div class="result"></div>
      </td>
    </tr>
    <tr>
      <td>Article 4</td>
      <td><input type="text" hidden="true" value="1" class="price">1.00€</td>
      <td>
        <div class="quantity buttons_added">
          <button type="button" class="change-quantity" data-amount="-1">-</button>
          <input type="number" class="quantity" value="0" min="0" max="3" />
          <button type="button" class="change-quantity" data-amount="1">+</button>
        </div>
      </td>
      <td>
        <div class="result"></div>
      </td>
    </tr>
  </table>
</div>

【讨论】：

【解决方案3】：

好的，多亏了经验，我实际上解决了我的问题，这就是我所做的：

for (var i = 0; i < ids.length; i++) {
            if (ids[i]%2) {
                if(quant != 0){
                    total = total-(tot/quant);
                    $("#total").html("Total : "+total.toFixed(2)+"€");
                }
                else {
                    total = total-(quant*1+price);
                    $("#total").html("Total : "+total.toFixed(2)+"€");
                }
            }
            else {
                return false;
            }

        }

我阻止了 quant go get to 0 以防止除以 0，然后添加了一个条件以从我的总数中删除一次价格。

感谢大家的帮助:)

【讨论】：