Кнопки плюс\минус для количества товаров
Случается что в макетах дизайнеры ставят кнопки плюс\минус для выбора количества товаров. В этой статья я покажу как заставить их работать на 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 больше единицы.
Так же для того что бы пользователь не вводил буквы, можно запретить их ввод, я писал как это сделать, в этой статье
0 комментариев