Считаем количество кликов
В этой теме мы хотим показать Вам маленький код, который при помощи библиотеки jQuery позволяет сосчитать, сколько раз пользователь кликнул по выбранным элементам.
Для наглядности, ниже расположены три одинаковые кнопки input. Отличаются кнопки только текстом на них. При клике по любой из этих кнопок, мы при помощи jQuery будем считать, сколько раз кликнули именно по данной кнопке, и выводить сообщение с количеством кликов (вывод сообщения можно легко удалить).
Для получения такого счетчика кликов, Вам потребуется подключить библиотеку jQuery. Лучше это делать в конце странички следующим образом:
JavaScript код:
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Так же нам понадобятся элементы, клики по которым мы будем считать. В нашем случае это обычные кнопки input:
HTML код:
<div align="center">
<input type="submit" value="Кнопка №1">
<input type="submit" value="Кнопка №2">
<input type="submit" value="Кнопка №3">
</div>
После того, как Вы добавили на страничку кнопки и подключили библиотеку jQuery, добавьте следующий JavaScript код, который будет считать количество кликов по элементам (в нашем случае по элементам input):
JavaScript код:
<script type="text/javascript">
$('input')
.data('counter', 0) // Обнуляем счетчик
.click(function() {
var counter = $(this).data('counter'); // Получаем значение
$(this).data('counter', counter + 1); // Увеличиваем значение на 1
alert($(this).data('counter')); // Выводим количество кликов
});
</script>
Как видите, код совсем маленький и очень удобный, т.к. позволяет считать клики для каждого элемента в отдельности. А куда его применить, так это уже зависит только от Вашей фантазии.
