Даша: Спасибо:3
31-05-2023
Читать статью
Санечка: я ничего не учила) но буду надеятся что ..
30-05-2023
Мейнер Сяо: Удачи всем сегодня на экзамене ;)..
Здравствуйте! Сегодня разберём, как сделать поле "количество товаров" для интернет-магазина с помощью 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, с которым и производим нужные действия.