Как можно просуммировать значения всех 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)+'');
});
Достаточно всем тегам с ценами назначить один единый класс .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>
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Хотите улучшить этот вопрос? Добавьте больше подробностей и уточните проблему, отредактировав это сообщение
Не работают кнопки owl-prev owl-next owl-dotsУ меня подключён jQuery 2
Есть база данных, созданная на основе CodeFirst EntityFramework