Question

我在使用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>

预先感谢：）

Answer 1

尝试：

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

此代码将变量总数转换为带+号的数字，如果为null或带||的NaN，则将其替换为0逻辑或。这种方法.toFixed（）方法始终可以使用一个数字。

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

Answer 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;
            }

        }

我阻止了量化为0的情况，以防止被0除，而不是添加了一个条件，以将价格从我的总数中删除一次。

感谢大家的帮助：）

防止值更改为NaN

3 个答案: