jquery - 防止值更改为 NaN

问题描述

我在使用 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€&lt;/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€&lt;/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€&lt;/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€&lt;/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>

提前致谢：）

标签： jqueryhtml

jquery - 防止值更改为 NaN

问题描述

解决方案

推荐阅读