Как создать цикл смены стиля для div?

Question

[LMI]

Я только изучаю Javascript и выполняю разные задачки. Как при клике изменять стили для элементов я уже научился, но как решить вроде бы простенькую задачку, я пока не знаю.

На странице есть 5 простых div и кнопка. Дивы имеют ширину и высоту 100px и они зеленого цвета.

Задание:

Создайте сценарий, который будет обрабатывать нажатие по кнопке и менять цвет одного из дивов на красный. Смена цвета должна происходить циклически, при первом нажатии первый div становиться красный остальные остаются зелеными, при втором нажатии – все div становятся зелеными, а второй красный и т.д.

Как изменить цвет одного элемента или всех сразу, я знаю, но как создать то, что написано выше, без понятия(

Comments

[fr33zy]

> при втором нажатии – все div становятся зелеными, а второй красный и т.д.
Вы имели ввиду "при нажатии на вторую кнопку - …" ?

[LMI]

fr33zy: Нет, на ту же самую кнопку. То есть при втором клике 2 див должен стать красным, а первый должен вернуть себе зеленый и так далее по кругу.

Answer 1

[Centrino]

Есть несколько простых решений.
1. Создать глобальную переменную, которую при каждом клике увеличиваете на 1, относительно этого значения устанавливаете div c текущим значением в красный, а предыдущему возвращаете зеленый.
2. Циклически (each) проходить по атрибуту цвета дивов и находить красный, если все зеленые (результат выполнения цикла false), то окрасить первый элемент в красный. Если же вернулось значение элемента, то этот элемент покрасить в зеленый, а следующий в красный.

В обоих случаях, вам нужно так же установить лимит, если счетчик, выходит за границу ( > 5) или след. єлемнета не существует, то сбросить счетчик или считать след. элементом первый.

Answer 2

[Михаил Вихрян]

Я бы обошелся без глобальной переменной, а сделал бы это так (если у нас, 4 дива к примеру):

function change_color() {
     if( !this.current_div || this.current_div == 3 ){this.current_div = 0;}
     else{this.current_div++;}
    ... (тут выполняем проверку и присваиваем цвета)
}