Вызывать разные обработчики, в зависимости от количества кликов

@xxoctt · Регистрация: 20.04.2015

Студворк — интернет-сервис помощи студентам

Доброго времени суток. Каким образом осуществить что бы по click на одну и туже ссылку , срабатывали разные события?

Есть три точки и ссылка. По клику на ссылку первая точка меняет цвет , когда нажимаем второй раз - цвет меняет вторая точка , третий раз - меняет цвет третья. css,js,jQuery,html.

Чуть позже добавлю что я наворотил

@BANO · 24.06.2016, 20:53

Не по теме:

Сообщение от xxoctt

css,js,jQuery,html

задание: найди лишнее...

выкладывайте сразу

@kalabuni · 24.06.2016, 21:01

чтобы не плодить глобальных переменных, можно сделать так:
после первого нажатия создаём ссылке атрибут numclick со значением 1 (т.е. один клик уже был)
при следующем клике нажатии numclick делаем равным 2 (было два клика)

изначально атрибута numclick у ссылки не было, т.е. проверка его значения вернёт null
вот и всё

теперь давайте сюда ваш html-код с вашими тремя точками и со ссылкой, и я к нему "привяжу" вышеописанный скрипт

@xxoctt · 25.06.2016, 00:13 **[ТС]**

kalabuni, Конечно , попробую только сам так сделать.

@Fedor Vlasenko · 25.06.2016, 00:44

незачем лишние атрибуты плодить не для этого они предназначены
при клике на ссылке this будет объект так вот в него и пишите свое состояние

HTML5
1
2
<a href="#" id="test">Test</a>
<div id="result"></div>

JavaScript
1
2
3
4
5
6
window.onload = function() {
  test.onclick = function() {
    this.numclick = (this.numclick || 0) + 1;
    result.innerHTML = this.numclick;
  }
};

Код для демонстрации, перепишите
Песочница

@dzendev · 25.06.2016, 09:41

Сообщение от xxoctt

Есть три точки и ссылка. По клику на ссылку первая точка меняет цвет , когда нажимаем второй раз - цвет меняет вторая точка , третий раз - меняет цвет третья.

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .circle{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: green;
        }
    </style>
</head>
<body>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <a href="#" id="link">click</a>
    <script>
        (function () {
            var link = document.getElementById('link'),
                circle = document.getElementsByClassName('circle');
            link.onclick = (function () {
                var numClick = 0;
 
                return function() {
                    if(numClick == 3) return false;
                    
                    circle[numClick].style.background = 'red';
                    numClick++;
 
                    return false;
                };
            })();
        })();
    </script>
</body>
</html>

Демонстрация http://codepen.io/anon/pen/OXWOWz

Новые блоги и статьи Все статьи Все блоги /
Основы OpenGL 3.3 и Qt 6.9. Трансформированный треугольник 8Observer8 27.06.2025 На русском https:/ / rutube. ru/ video/ e424497dd6b7ae7e11494027c4b31a54/ https:/ / vkvideo. ru/ video-231040171_456239019 https:/ / www. youtube. com/ watch?v=mfD-ZL7wa_4 Bastyon	Федерация аутентификации на основе JWT-токенов с Keycloak и .NET в гетерогенных инфраструктурах ArchitectMsa 27.06.2025 Тот самый момент, когда впервые столкнулся с проблемой интеграции десятка разрозненных систем аутентификации в одной корпоративной экосистеме. Кажый сервис жил своей жизнью - тут Basic Auth, там. . .	Гайд по современным СУБД (небесспорный) Codd 26.06.2025 Когда я только начинал свой путь в IT как рядовой программист, база данных казалась мне чем-то простым и понятным. Ну, серьезно — это же просто место, где лежат данные, верно? Напиши SELECT * FROM. . .	Использование C# с AWS S3: Примеры с AWS SDK для .NET stackOverflow 26.06.2025 Amazon S3 (Simple Storage Service) уже давно стал стандартом де-факто в мире облачного хранения данных. Особенно приятно, что для разработчиков . NET предусмотрен отличный SDK, который значительно. . .	Веб-автоматизация с Python и Selenium AI_Generated 25.06.2025 Selenium с Python — это комбинация, которая выдержала проверку временем. Несмотря на появление новых инструментов вроде Playwright или Puppeteer, связка Python-Selenium остаётся золотым стандартом. . .
CQRS и Event Sourcing на C# ArchitectMsa 25.06.2025 За последние несколько лет сложность корпоративных приложений выросла в геометрической прогрессии. Простые монолитные системы уступили место распределенным микросервисам, а нагрузка на корпоративные. . .	Хак домофона или как открыть дверь по номеру yariko 25.06.2025 Забыли дома ключ. Не проблема. Можно открыть дверь домофона, просто позвонив на свой номер квартиры. Идея состоит в следующем. Внутрь трубки абонента встраивается контроллер, который по звонку сам. . .	Как украсить новогоднюю елку с Q# и Qiskit EggHead 24.06.2025 Что может быть необычнее, чем применить законы квантовой механики для украшения новогодней елки? Пока другие развешивают обычные гирлянды, я решил объединить свою страсть к квантовым вычислениям с. . .	Системы нулевого доверия на C# UnmanagedCoder 24.06.2025 Традиционная архитектура безопасности работает по принципу средневекового замка: создаём высокие стены вокруг корпоративной сети, укрепляем ворота межсетевыми экранами и системами обнаружения. . .	Снова не мой путь. Циклическое среднее, я обеими руками за проверку условия, в ракурсе данной задачи - циклическое среднее в топку. Hrethgir 24.06.2025 Привет. Такой вопрос - нужно выводить среднее математическое между двумя направлениями, интервал значений которых может лежать в диапазоне одного оборота по кругу. Проблема заключается в том, что. . .

@xxoctt 1 / 1 / 1 Регистрация: 20.04.2015 Сообщений: 17

	Вызывать разные обработчики, в зависимости от количества кликов 24.06.2016, 20:22. Показов 1028. Ответов 5 Метки нет (Все метки) Доброго времени суток. Каким образом осуществить что бы по click на одну и туже ссылку , срабатывали разные события? Есть три точки и ссылка. По клику на ссылку первая точка меняет цвет , когда нажимаем второй раз - цвет меняет вторая точка , третий раз - меняет цвет третья. css,js,jQuery,html. Чуть позже добавлю что я наворотил 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	24.06.2016, 21:01
	чтобы не плодить глобальных переменных, можно сделать так: после первого нажатия создаём ссылке атрибут numclick со значением 1 (т.е. один клик уже был) при следующем клике нажатии numclick делаем равным 2 (было два клика) изначально атрибута numclick у ссылки не было, т.е. проверка его значения вернёт null вот и всё теперь давайте сюда ваш html-код с вашими тремя точками и со ссылкой, и я к нему "привяжу" вышеописанный скрипт 1

@xxoctt 1 / 1 / 1 Регистрация: 20.04.2015 Сообщений: 17
	25.06.2016, 00:13 [ТС]
	kalabuni, Конечно , попробую только сам так сделать. 0