0

Всем привет, у меня есть такой блок, в корзине есть Input со span + и -. Нужно что бы при увеличении кол-во товара, сумма товара менялась. Кто сможет подсказать, как реализовать это?

HTML

<div class="basket__content-price">
    <div class="num-block skin-2 basket__price-counter">
        <div class="num-in">
          <span class="minus dis" data-change="-1"></span>
          <input type="text" class="in-num" value="1">
          <span class="plus" data-change="+1"></span>
        </div>
      </div>
    <div class="info__content-price">
        <div class="content__item-price" data-sum='2199'>2 199</div>
        <span class="main-discount">- 56%
            <span class="content__item-oldprice">4 999</span>
        </span>
    </div>
</div>

JS - для input и кнопок

 $('.num-in span').click(function () {
    var $input = $(this).parents('.num-block').find('input.in-num');
  if($(this).hasClass('minus')) {
    var count = parseFloat($input.val()) - 1;
    count = count < 1 ? 1 : count;
    if (count < 2) {
      $(this).addClass('dis');
    }
    else {
      $(this).removeClass('dis');
    }
    $input.val(count);
  }
  else {
    var count = parseFloat($input.val()) + 1
    $input.val(count);
    if (count > 1) {
      $(this).parents('.num-block').find(('.minus')).removeClass('dis');
    }
  }
  
  $input.change();
  return false;
});
2
  • Проблема в том, что вы вообще пытаетесь менять html на какое-то событие. Хотя html в случае корзинки -- всего лишь отображение данных корзинки; вы же не пытаетесь менять пиксели на экране напрямую. 20 авг 2020 в 20:52
  • html отображается в пиксели браузером. Корзинка может отображаться в html программой на javascript. A по нажатию на [+] просто поменяется одно поле. 20 авг 2020 в 21:08

1 ответ 1

1

 Можно было бы сделать это более солиднее, но я просто отвечу на этот кейс :) Тут суть такая, тебе просто нужна простая математики: Берем цену и умножаем на количество, вот и все ;)

$(".num-in span").click(function () {
    var $input = $(this).parents(".num-block").find("input.in-num");
    var price = $('.content__item-oldprice').text().replace(' ', '')*(1 - .56)
    if ($(this).hasClass("minus")) {
        var count = parseFloat($input.val()) - 1;
        count = count < 1 ? 1 : count;
        if (count < 2) {
            $(this).addClass("dis");
        } else {
            $(this).removeClass("dis");
        }
        $input.val(count);
        $(".content__item-price").text(count*(+price))
    } else {
        var count = parseFloat($input.val()) + 1;
        $input.val(count);
        $(".content__item-price").text(count*(+price))
        if (count > 1) {
            $(this).parents(".num-block").find(".minus").removeClass("dis");
        }
    }

    $input.change();
    return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="basket__content-price">
    <div class="num-block skin-2 basket__price-counter">
        <div class="num-in">
            <span class="minus dis" data-change="-1">-</span>
            <input type="text" class="in-num" value="1">
            <span class="plus" data-change="+1">+</span>
        </div>
    </div>
    <div class="info__content-price">
        <div class="content__item-price" data-sum='2199'>2 199</div>
        <span class="main-discount">- 56%
            <span class="content__item-oldprice">4 999</span>
        </span>
    </div>
</div>

Пример конечно извращение полное, но думаю для новичка сойдет. Главное пойми суть и лучше начни с нативного javascript-а, на jQuery и т.д. время еще будет. Удачи ;)

1
  • var price = $('.content__item-oldprice').text().replace(/\s+/g, "") * (1 - .56) — если вдруг что-то будет стоить 1 000 000 ) А умножение - и так неявно превращает операнды в числа, поэтому можно без плюсика, просто count*price 21 авг 2020 в 0:28

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.