Считаем количество кликов
В этой теме мы хотим показать Вам маленький код, который при помощи библиотеки jQuery позволяет сосчитать, сколько раз пользователь кликнул по выбранным элементам.
Для наглядности, ниже расположены три одинаковые кнопки input. Отличаются кнопки только текстом на них. При клике по любой из этих кнопок, мы при помощи jQuery будем считать, сколько раз кликнули именно по данной кнопке, и выводить сообщение с количеством кликов (вывод сообщения можно легко удалить).
Для получения такого счетчика кликов, Вам потребуется подключить библиотеку jQuery. Лучше это делать в конце странички следующим образом:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>Также нам понадобятся элементы, клики по которым мы будем считать. В нашем случае это обычные кнопки input:
<div align="center">
<input type="submit" value="Кнопка № 1">
<input type="submit" value="Кнопка № 2">
<input type="submit" value="Кнопка № 3">
</div>После того, как Вы добавили на страничку кнопки и подключили библиотеку jQuery, добавьте следующий JavaScript код, который будет считать количество кликов по элементам (в нашем случае по элементам input):
<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>Как видите, код совсем маленький и очень удобный, т.к. позволяет считать клики для каждого элемента в отдельности. А куда его применить, так это уже зависит только от Вашей фантазии.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
В JavaScript коде вместо: alert($(this).data('counter'));
Используйте: $('.counter').eq($(this).index()).text($(this).data('counter'));