Чередование стилей активации на JavaScript

В предыдущем уроке мы с вами научились активировать ячейки по клику на них. Давайте теперь сделаем так, чтобы происходило чередование цветов: пусть первая ячейка красится в красный, вторая - в зеленый, третья - опять в красный и так далее.

Для решения этой задачи нам понадобится уже два CSS класса:

.color1 { background: red; } .color2 { background: green; }

Реализуем описанное чередование:

let tds = document.querySelectorAll('#table td'); let color = 'color1'; for (let td of tds) { td.addEventListener('click', function() { if (color == 'color1') { color = 'color2' } else { color = 'color1' } this.classList.add(color); }); }

Разберите мой код, а затем самостоятельно повторите решение этой задачи.

Чередование многих цветов из массива

Пусть теперь мы хотим чередовать не два цвета, а произвольное количество. Давайте для этого будем хранить массив CSS классов:

let colors = ['color1', 'color2', 'color3'];

Напишем цвета наших классов:

.color1 { background: red; } .color2 { background: green; } .color3 { background: yellow; }

А теперь реализуем чередование:

let tds = document.querySelectorAll('#table td'); let i = 0; let colors = ['color1', 'color2', 'color3']; for (let td of tds) { td.addEventListener('click', function() { this.classList.add(colors[i]); i++; if (i == colors.length) { i = 0; } }); }

Расскажите, как работает приведенный мною код.

enru