Скрипт для счетчика товаров некорректно работает

294

16 апреля 2022, 22:40

Помогите, пожалуйста! Стоимость каждого товара пересчитывается только, если ввести кол-во вручную, а если нажимаем на + или - кол-во меняется, а сумма не пересчитывается. Что нужно дописать в скрипте, чтобы это исправить?

<div class='cikl_basket'>
<span class='cena'>10</span> грн
<span class='quantity-arrow-minus'> - </span>
<input class='counter' name='col' type='text' value='1'>
<span class='quantity-arrow-plus'> + </span></td>   
<span class='stoimost'>10</span> грн
</div>
<div class='cikl_basket'>
<span class='cena'>40</span> грн
<span class='quantity-arrow-minus'> - </span>
<input class='counter' name='col' type='text' value='1'>
<span class='quantity-arrow-plus'> + </span></td>   
<span class='stoimost'>40</span> грн
</div>
<center>Итого: <span class='cena_red'></span> грн</center>
<script type="text/javascript">
function count_totals(){
$('.cikl_basket').each(function(){
 
      var price = $(this).find(".cena").text();
      var count = $(this).find(".counter").val();
      
      $(document).ready(function() {
    $('.quantity-arrow-minus').click(function () {
        var $input = $(this).parent().find('.counter');
        var count = parseInt($input.val()) - 1;
        count = count < 1 ? 1 : count;
        $input.val(count);
        $input.change();
        return false;
    });
    $('.quantity-arrow-plus').click(function () {
        var $input = $(this).parent().find('.counter');
        $input.val(parseInt($input.val()) + 1);
        $input.change();
        return false;
    });
});
var summ = parseFloat(price * count).toFixed(2);
               
      $(this).find(".stoimost").text(summ);     
      
   });
  
   var items = document.querySelectorAll('.stoimost'),
      summa = 0;
  [].forEach.call( items, function(el) {
       summa += +el.innerText;
       newsumma = parseFloat(summa).toFixed(2);
});
 document.querySelector('.cena_red').innerText = newsumma;
}
   
  count_totals();
  $("input").on('input', function(){
    count_totals();
  })     
</script>

Answer 1

В вашем коде сейчас каша, в комментариях к вопросу есть уточнения

Чтобы исправить - нужно переписать ваш код, давно не использовал jQuery, поэтому приведу пример того, как это может работать на JavaScript без jQuery

Код html из вопроса предлагаю обернуть в <div class="basket"></div>

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

// инпуты с количествами товаров
const inputs = document.querySelectorAll('input.counter')
// стоимости введенного кол-ва товаров
const stoimosti = document.querySelectorAll('span.stoimost')
// цены товаров
const ceni = document.querySelectorAll('span.cena')
// сумма итого
const summa = document.querySelector('span.cena_red')
// общий div корзины
const basket = document.querySelector('div.basket')
function getTotal(){
  
  // текущая сумма итого
  let current_summ = 0;
  
  inputs.forEach( (element, index) => {
    // в span стоимостей перезаписываем число
    stoimosti[index].innerText = parseInt( ceni[index].innerText ) * parseInt( element.value )
    // увеличиваем сумму итого
    current_summ += parseInt( stoimosti[index].innerText )
  } )
  
  summa.innerText = current_summ;
}
// слушаем клик внутри div корзины
basket.addEventListener('click', function(event){
  
  // смотрим на класс элемента
  let className = event.target.className
  
  // на сколько меняем кол-во товаров при клике на стрелки
  let changeNum = 5
  
  // если клик по стрелке плюс/минус, то пересчитываем
  if( className === 'quantity-arrow-plus' || className === 'quantity-arrow-minus'){
    
    let el = event.target.closest('div')
    let index = [...el.parentElement.children].indexOf(el)
    
    if( className === 'quantity-arrow-plus') inputs[index].value = parseInt( parseInt( inputs[index].value ) + changeNum )
    
    else inputs[index].value = parseInt( parseInt( inputs[index].value ) - changeNum ) > 0 ? parseInt( parseInt( inputs[index].value ) - changeNum ) : 0
    
    getTotal()
  }
  
});
// слушаем изменение input с кол-вом товаров
basket.addEventListener('change', function(event){ if( event.target.className === 'counter' ) getTotal() });
// вызываем ф-цию сразу, чтобы получить итого
getTotal()

<div class="basket">
<div class='cikl_basket'>
<span class='cena'>10</span> грн
<span class='quantity-arrow-minus'> - </span>
<input class='counter' name='col' type='text' value='1'>
<span class='quantity-arrow-plus'> + </span></td>   
<span class='stoimost'>10</span> грн
</div>
<div class='cikl_basket'>
<span class='cena'>40</span> грн
<span class='quantity-arrow-minus'> - </span>
<input class='counter' name='col' type='text' value='1'>
<span class='quantity-arrow-plus'> + </span></td>   
<span class='stoimost'>40</span> грн
</div>
<center>Итого: <span class='cena_red'></span> грн</center>
</div>