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

Случается что в макетах дизайнеры ставят кнопки плюс\минус для выбора количества товаров. В этой статья я покажу как заставить их работать на jQquery.

Добавляем разметку

<div class="quality">
    <button class="minus"></button>
    <input type="text" value="1">
    <button class="plus"></button>
</div>

Не много стилей, что бы это выглядело прилично. Кнопки +- я сделал чисто на CSS псевдоклассами :after, :before, вы можете поставить просто текстом и убрать соответствующие стили.

.quality {
    border: 2px solid #E4F4FD;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border-radius: 4px;
    max-width: 210px; 
}

.quality button {
    width: 60px;
    height: 66px;
    border: none;
    background: none;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    position: relative;
}

.quality button.minus:after {
    content: "";
    position: absolute;
    height: 2px;
    width: 14px;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    background: #083C5A;
    border-radius: 3px;
}

.quality button.plus:after {
    content: "";
    position: absolute;
    height: 2px;
    width: 14px;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    background: #083C5A;
    border-radius: 3px;
}

.quality button.plus:before {
    content: "";
    position: absolute;
    height: 14px;
    width: 2px;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    background: #083C5A;
    border-radius: 3px;
}

.quality input {
    border: none;
    text-align: center;
    color: #083C5A;
    font-weight: 500;
    font-size: 18px;
    margin-bottom: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    height: 66px;
    width: 100%;
}

Ну и конечно jQuery

jQuery(document).ready(function ($) {
    $('.quality .plus').click(function () {
        var i = $(this).siblings('input').val()
        i++
        $(this).siblings('input').val(i)
    });
    $('.quality .minus').click(function () {
        var i = $(this).siblings('input').val()
        if (i > 1){
            i--
            $(this).siblings('input').val(i)
        }
    });
});

Для кнопки минус стоит дополнительное условие, что бы в инпуте не было 0 или отрицательных чисел, i измениться только если i больше единицы.

Так же для того что бы пользователь не вводил буквы, можно запретить их ввод, я писал как это сделать, в этой статье