1

Как можно просуммировать значения всех input'ов. У меня есть несколько блоков с классами price+i, где i(1,2,3,4,5,6) переменная которая добавляется при создании блока, я получаю значение html блока через цикл, но тк, например, товар с классом price2 может отсутствовать, и я получаю значениe NAN,как можно или сделать проверка на существование класса, и пройтись только по существующим?

Пример товара

<div class="select-organaiser__item">
                <div class="item-img img-stand">
                    <img src="img/stand-3.png" alt="organaiser">
                </div>
                <div class="item-title">
                    <h3>Комплект брелков для гаджетов </h3>
                </div>
                <div class="item-old-price">
                    558 
                </div>
                <div class="item-price">
                    279 
                </div>
                <div class="item-btn buyprod" onclick="i=6;pr=279;">
                    <i class="fas fa-shopping-cart"></i>
                    Заказать
                </div>
            </div>

Суммирование

var sum_price=0;
                  for (var index = 1; index < 7; index++) {
                    sum_price+=parseInt($(".price"+index).html());
                  }
                  $(".sum_price").replaceWith('<input class="sum_price" value="'+sum_price+' readonly"></input>');
              });

Весь JS

 $('.show_popup').click(function() {
      var popup_id = $('#' + $(this).attr("rel"));
      $(popup_id).show();
      $('.overlay_popup').show();
      })
      $('.close').click(function() {
      $('.overlay_popup, .popup').hide();
      })
        $(".buyprod").click(function () {
            var img = $(this).prevAll(".item-img").find("img").attr("src");
            var text = $(this).prevAll(".item-title").find("h3").text();
            var price = $(this).prevAll(".item-price").text();
            price = price.replace(/\s/g, '');
            price = price.slice(0,-3);
            var y=0;
            if($('.item'+i).length) {
              document.getElementById('input'+i).value = parseInt(document.getElementById('input'+i).value,10)+1;
              $(".price"+i).html('' + (parseInt(document.getElementById('input' + i).value, 10) * pr));
            }
            else{
               $("#cartdiv").append(`
              <div id="cart_item" class="item${i}">
              <img src="${img}" alt="photo1">
              <div class="prod_name">${text}</div>
              <div class="counter">
                <div class="counter-left minus c=" data-index=${i}>
                    <i class="fas fa-minus"></i>
                </div>
                <input type="text" class="counter-input" id="input${i}" value="1" readonly>
                <div class="counter-right plus" data-index=${i}>
                    <i class="fas fa-plus"></i>
                </div>
            </div>
              <div class="price${i}">${price}</div>
              <div class="remove" data-delete=${i}>X</div>
              <br>
              </div>
              `);
              }
              if(y==0){
                $("#cartdiv").append(`
                <input class="sum_price" value="${sum_price}"></input>
                `)
              }
              var sum_price=0;
              for (var index = 1; index < 7; index++) {
                sum_price+=parseInt($(".price"+index).html());
              }
              $(".sum_price").replaceWith('<input class="sum_price" value="'+sum_price+' readonly"></input>');
          });
          $(document).on("click", ".remove", function () {
            var del = +$(this).data("delete");
            $('.item'+del).remove();
          });
      $(document).on("click", ".minus", function () {
        var index = +$(this).data("index");
        if(parseInt(document.getElementById('input' + index).value, 10)>1 )
          {
          document.getElementById('input' + index).value = parseInt(document.getElementById('input' + index).value, 10) - 1;
          $(".price"+index).html('' + (parseInt(document.getElementById('input' + index).value, 10) * pr)+'');
          }
      });
          $(document).on("click", ".plus", function () {
            var index = +$(this).data("index");
            document.getElementById('input' + index).value = parseInt(document.getElementById('input' + index).value, 10) + 1;
            $(".price"+index).html('' + (parseInt(document.getElementById('input' + index).value, 10) * pr)+'');
          });
6
  • 1
    sum_price+=parseInt($(".price"+index).html()); => sum_price+=parseInt($(".price"+index).val());
    – InDevX
    Commented 23 окт. 2019 в 8:05
  • 1
    У меня есть несколько блоков с классами price+i - это неверный подход. Класс должен быть просто .price. И тогда все проблемы сразу исчезнут Commented 23 окт. 2019 в 8:07
  • @InDevX не сработало, может ошибка где-то ещё?
    – Oleksandr
    Commented 23 окт. 2019 в 8:09
  • 1
    id нельзя дублировать. если не сработало или добавьте сюда минимальный воспроизводимый пример или console.log() вам в помощь.
    – InDevX
    Commented 23 окт. 2019 в 8:15
  • 1
    @Alexander не id="price", а class="price" и их суммировать просто Commented 23 окт. 2019 в 8:15

1 ответ 1

3

Достаточно всем тегам с ценами назначить один единый класс .price и работать с ним:

let sum = 0;
$('.price').each(function() {
    sum += Number($(this).text());
});

console.log(sum);
.price {
  border: 1px solid blue;
  padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="price">1</div>
<div class="price">2</div>
<div class="price"></div>
<div class="price"></div>
<div class="price">3</div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.