Как сделать суммирование в карточке при прибавлении и убавлении времени?

192

28 января 2020, 19:40

На странице есть несколько блоков,каждый разный, в блоке прибавляется по часу и сумма снизу суммируется и т.д., далее отправляется формой обратной связи. Вот код который прибавляет и убавляет, не могу сделать так, чтобы еще и к сумме прибавлялось.

$('.down').click(function () {
        var $input = $(this).parent().find('input');
        var count = parseInt($input.val()) - 1;
        count = count < 1 ? 1 : count;
        $input.val(count);
        $input.change();
        return false;
    });
    $('.up').click(function () {
        var $input = $(this).parent().find('input');
        $input.val(parseInt($input.val()) + 1);
        $input.change();
        return false;
    });

Answer 1

$('.down').click(function () { 
        var $input = $(this).parent().find('input'); 
        var count = parseInt($input.val()) - 1; 
        count = count < 1 ? 1 : count; 
        $input.val(count); 
        $input.change(); 
        $('#id').html($input.val() * 500); // id заменить на селлектор того блока где выводим цену, А 500 на ставку за час 
        return false; 
 
    }); 
    $('.up').click(function () { 
        var $input = $(this).parent().find('input'); 
        $input.val(parseInt($input.val()) + 1); 
        $input.change(); 
        $('#id').html($input.val() * 500); // Аналогично 
        return false; 
    });

А если используется несколько блоков и надо применить именно к конкретному то в зависимости от разметки меняем примерно так:

 $(this).parent().find('#id').html($input.val() * 500); // Получаем родителя для кнопки по которой кликнули и в нем ищем элемент где выводится цена

Answer 2

let $calc = $('.calc'); 
 
$('body').click(function (event) { // т.к. блоков много, начинаем с прослушмвания клика но боди 
  let $t = $(event.target); 
  if (event.target.className == 'button-calc') { // кликнули ли мы по кнопке +/- 
    let sign = event.target.value; 
    let $wrapper = $(event.target).closest('.calc'), // ищем обёртку этой кнопки и дальше работаем от неё 
      $amount = $wrapper.find('.amount'), // оределяем элемент с суммой 
      amountInit = parseInt($wrapper.find('.amount-init').html()), // определяем тег начальной суммой 
      finalAmount = parseInt($amount.html()), // определяем сумму 
      $qty = $wrapper.find('.qty'), // определяем элемент с количеством 
      qty = parseInt($qty.html()); 
    if (sign == '-') { // считаем 
      finalAmount = parseInt($amount.html()) - amountInit; 
      qty--; 
    } else { 
      finalAmount = parseInt($amount.html()) + amountInit; 
      qty++; 
    } 
    $amount.html((finalAmount < amountInit) ? amountInit : finalAmount); // подставляем 
    $qty.html((qty < 1) ? 1 : qty); 
  } 
   
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="calc"> 
  <div class="info">Стоимость <span class="amount-init">500</span><span class="currency"> руб.</span></div> 
  <input type="button" class="button-calc" value="-" /> 
  <div><span class="qty">1</span>&nbsp;x&nbsp;<span class="amount">500</span><span class="currency"> руб.</span></div> 
  <input type="button" class="button-calc" value="+" /> 
</div>