Как просуммировать значение всех input?

263
30 сентября 2021, 23:00

Как можно просуммировать значения всех 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)+'');
          });
Answer 1

Достаточно всем тегам с ценами назначить один единый класс .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>

READ ALSO
Не добавляеться класс через jQuery [закрыт]

Не добавляеться класс через jQuery [закрыт]

Хотите улучшить этот вопрос? Добавьте больше подробностей и уточните проблему, отредактировав это сообщение

70
Не работает pagination Owl Carousel

Не работает pagination Owl Carousel

Не работают кнопки owl-prev owl-next owl-dotsУ меня подключён jQuery 2

155
Наращивание функционала asp.net mvc

Наращивание функционала asp.net mvc

Только начал изучать aspnet mvc

172
Как правильно выгрузить connection string c xml файла в DBContext

Как правильно выгрузить connection string c xml файла в DBContext

Есть база данных, созданная на основе CodeFirst EntityFramework

114