В этой статье рассмотрим, как сделать у <input type="text"> кнопки, которые при клике будут увеличивать и уменьшать введенное значение на единицу. Такие кнопки часто используются в интернет-магазинах для увеличения и уменьшения счетчика купленных товаров.
Разметка инпута и кнопок:
<input type="text" class='number' value='0'>
<button class='plus'>+</button>
<button class='minus'>-</button>
<button class='plus'>+</button>
<button class='minus'>-</button>
Чтобы кнопки начали функционировать, понадобится jquery скрипт:
jQuery(document).ready(function () {
let pr = $(".number");
$(".plus").click(function() {
let count = parseInt(pr.val()) + 1;
pr.val(count);
});
$(".minus").click(function() {
let count = parseInt(pr.val()) - 1;
count = count < 1 ? 0 : count; // исключаем отрицательные числа
pr.val(count);
});
});
let pr = $(".number");
$(".plus").click(function() {
let count = parseInt(pr.val()) + 1;
pr.val(count);
});
$(".minus").click(function() {
let count = parseInt(pr.val()) - 1;
count = count < 1 ? 0 : count; // исключаем отрицательные числа
pr.val(count);
});
});
