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

Скачать - Поле количество товаров

Здравствуйте! Сегодня разберём, как сделать поле "количество товаров" для интернет-магазина с помощью JavaScript. Данное поле вы могли видеть на многих интернет-магазинах. У него есть кнопки: приплюсовать единицу и вычесть единицу. Наличие такого функционала не только делает использование ресурса более удобным, но и говорит о некой солидности сайта. Плюс подталкивает покупателя взять две, три единицы данного товара. Для начала создадим HTML каркас:

<div class="count_box">
<div class="minus">-</div>
<input class="inp_price" type="text" value="1" />
<div class="plus">+</div>
</div>

Добавим CSS стили:

.minus {
    cursor: pointer;
    width:15px;
    float:left;
    text-align:center;
    
}
.plus {
    cursor: pointer;
    width:15px;
    float:right;
    text-align:center;
}

.inp_price {
    width:40px;
    text-align:center;
    border:none;
    border-left:1px solid gray;
    border-right:1px solid gray;
}

.count_box {
    width:70px;
    border:1px solid gray;  
}

Интерактивную часть поля для количество товаров будем делать c помощью jquery.

$(document).ready(function() {
    $('.minus').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;
    });
    $('.plus').click(function () {
        var $input = $(this).parent().find('input');
        $input.val(parseInt($input.val()) + 1);
        $input.change();
        return false;
    });
});	

Основной идей интерактивной части заключается в том, что при обработке клика по кнопке 'Плюс' или 'Минус', мы ищем родителя, и внутри этого родителя производим поиск тега input, с которым и производим нужные действия.