Увеличение и уменьшение значения в поле input

jscriptВ этом уроке мы расскажем, как сделать функцию увеличения и уменьшения значения в поле input с помощью кнопок «+» и «-».

Данная функция будет полезной для интернет-магазина, для указания количества товара в корзине.

Шаг 1. Подключаем библиотеку jQuery

Первым делом нужно подключить библиотеку jQuery так как без нее скрипт не будет работать:


Шаг 2. HTML-разметка

Далее нужно сделать HTML-разметку. Разметка очень простая – кнопки «+» и «-» и поле input:

-
+

Шаг 3. Файл скрипта

Теперь создаем js-файл и пишем в нем следующий код (в исходниках он называется js.js):

$(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;
	});
	
});

Шаг 4. Подключаем скрипт

Далее нужно подключить наш скрипт к странице. Для этого пишем:


Финальный результат

Если все сделали правильно, то на данном этапе все должно работать. Также вы можете оформить кнопки и поле input по своему усмотрению.

На этом урок окончен. Спасибо за внимание.

Автор урока: редакция REDSTAR
Материалы: pcvector.net

Урок для Вас подготовлен командой сайта red-star.pro.