Перемножить элементы таблицы jquery

142

24 декабря 2020, 10:00

Есть корзина интернет магазина, в которой стараюсь сделать перерасчет по клику цены. В случае 1 товара проблем особых нет, но в случае 2х и более товаров он считает только же 1 элемент и разбрасывает его на все остальные. Есть таблица с классом jshop td цена за единице товара с класом single-price-var, но поскольку там есть буквы я извлекаю цифру вот так:

var oldPricecart = jQuery('.single-price-var').text();
    var workintoldpricecart = parseInt(oldPricecart);

Количество (можно менять по клику)

var quantity = jQuery('.data>.inputbox').val();

Подсумма в каждой tr за товар -td с классом total_price.
Ну и на выходе отдельно строка для суммы по всем товарам с классом.

Суть вопроса следующая, каким образом можно перебрать все элементы таблицы с товарами (пересчитать) по клику на плюс или минус количества какого-либо товара чтобы все это на выходе записать в общую сумму.

Пробовал each, но скорей либо я торможу или же не туда смотрю.

Answer 1

// Весь товар 
// тут задача пробижаться по всем элементав таблицы, в каждой узнать ценну и сложить. 
$('#all').on('click', function(){ 
  // создаём 0, она будет общем значением 
  let total_price = 0; 
  // проходим по всем товарам 
  $('.basket .item').each(function(){ 
    // получаем текущую ценну 
    let this_price =  parseInt($(this).find('.total_price').text()); 
    // прибавляем её к тому общему значению 
    total_price = total_price + this_price; 
  }); 
  // в конце выводим результат 
  $('.basket_price b').text(total_price); 
}); 
 
// Выделенный 
// тут почти всё тоже самое, только проверим "состояние" выбранного чекбокса, если не выбран, то пропускаем 
$('#selected').on('click', function(){ 
  // так же нулевая переменная 
  let total_price = 0; 
  // так же пробегаем по всем элементам 
  $('.basket .item').each(function(){ 
    // а вот тут уже основное, проверка на нажат ли checkbox 
    let isSelected = $(this).find('input[type="checkbox"]').prop('checked'); 
    if(isSelected) { 
      let this_price =  parseInt($(this).find('.total_price').text()); 
      total_price = total_price + this_price; 
      } 
    }); 
  $('.basket_price b').text(total_price); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="basket"> 
  <div class="item"> 
    <div class="name"> 
        Какой-то товар 1 
        <input type="checkbox" checked> 
    </div> 
    <div class="total_price">100</div> 
  </div> 
  <br> 
  <div class="item"> 
    <div class="name"> 
        Какой-то товар 2 
        <input type="checkbox" checked> 
    </div> 
    <div class="total_price">200</div> 
  </div> 
  <br> 
  <div class="item"> 
    <div class="name"> 
        Какой-то товар 3 
        <input type="checkbox" checked> 
    </div> 
    <div class="total_price">300</div> 
  </div> 
</div> 
<div class="basket_price"> 
  Вся корзина стоит <b>100500</b> 
</div> 
<b>Пересчитать:</b><br> 
<input id="all" type="button" value="Весь товар"> 
<input id="selected" type="button" value="Только выбранное">

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Проблема с анимацией в select

пытаюсь стилизовать select, хочу сделать анимацию, что при клике на select и выборе нужного option, border-bottom будет менять цвет, а еще лучше это будет...

131

jQuery