Предотвращение изменения значения на NaN

Question

У меня проблема с моим общим div с использованием JQuery.

На самом деле этот 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) + "€");

Этот код приводит переменную сумму в число со знаком + и заменяет на 0, если ноль или NaN с ||логический илиТаким образом, метод .toFixed () всегда имеет номер для работы.

Answer 2

Проблема, как уже отмечали другие, заключается в том, что вы делите на ноль, когда сумма и количество строк равны нулю.

Однако вы должны заметить, что ваше решение намного сложнее, чем нужно, и разделение, вызывающее проблему, является полностью избыточным.

Логика может быть DRY-создана и сделана намного более расширяемой, удалив уникальные атрибуты 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, затем добавил условие для удаления цены.один раз из моего общего числа.

Спасибо, ребята, за вашу помощь:)