Поле "количество товаров" для интернет-магазина средствами JavaScript

Здравствуйте! Сегодня разберём, как сделать поле "количество товаров" для интернет-магазина с помощью 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, с которым и производим нужные действия.