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

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

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

Доброго времени суток. Каким образом осуществить что бы по 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

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

<!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

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

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	24.06.2016, 20:53	2
	Не по теме: Сообщение от xxoctt css,js,jQuery,html задание: найди лишнее... выкладывайте сразу 1

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

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

	25.06.2016, 09:41