2

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

P.S. Если коротко: input counter * input price = span sum.

JS

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

        return false;
    });
});

HTML

<div class="goods">
    <div class="name">Название товара</div>
    <div class="goods-count">
        <span class="amount">
            <span class="down">-</span>
            <input type="text" class="counter" value="1 шт." />
            <input type="hidden" class="price" value="5000" />
            <span class="up">+</span>
        </span>
    </div>
    <div class="goods-price"><span class="sum">5000</span> руб.</div>
</div>
0

2 ответа 2

4

На вашем месте я бы сделал немного по другому.

  1. Повесил бы обработчик на onclick на контейнер с товаром.
  2. Смотрел бы на какой элемент нажали.
  3. В зависимости от этого предпринимал бы действие.
  4. Все данные связанные со штуками и ценой я бы хранил в data-атрибутах
  5. Всегда пишите второй аргумент в parseInt()

Вот работающий полный пример

$('.goods').on('click', function(evt) {
    var elem = evt.target;
    var container = evt.currentTarget;
    var input = container.getElementsByClassName('counter')[0];
    var count = parseInt(input.getAttribute('data-count'), 10);

    if (elem.classList.contains('down')) {
        count = count == 1 ? count : (count - 1);
    } else if (elem.classList.contains('up')){
        count += 1;
    }
    input.setAttribute('data-count', count);
});

Что можно в нем улучшить?

  1. Использовать во всем этом коде jQuery, это не сложно изменить, заодно и поймете как это работает.
  2. jQuery умеет фильтровать элементы вызывающие событие и игнорировать другие по селектору. Второй аргумент функции on() - selector
3
  • Спасибо огромное!
    – dikardRus
    16 сен 2015 в 7:14
  • а как можно реализовать подсчет общей суммы товаров в блоке <span class="itog">0 р.</span>, например?
    – dikardRus
    16 сен 2015 в 8:31
  • @dikardRus, на этом сайте принято, задавая вопросы, показывать, что уже сделано. В обработчик события надо добавить действие, например, $('.goods-price').each(), которое переберет все контейнеры с ценами и подсчитает их сумму.
    – Rolandius
    16 сен 2015 в 9:13
-1

забыли это в html добавить, между тегами

<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>

иначе работать не будет

1
  • 1
    Поясните пожалуйста, что забыли, между какими тегами?
    – 0xdb
    9 окт 2018 в 18:59

Ваш ответ

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

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