Alternerande aktiveringsstilar i JavaScript

I föregående lektion lärde vi oss att aktivera celler genom att klicka på dem. Låt oss nu göra så att färger alterneras: låt den första cellen färgas röd, den andra - grön, den tredje - återigen röd och så vidare.

För att lösa denna uppgift behöver vi redan två CSS-klasser:

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

Låt oss implementera den beskrivna alterneringen:

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);
	});
}

Analysera min kod och återskapa sedan lösningen på denna uppgift på egen hand.

Alternering av många färger från en array

Låt oss nu säga att vi vill alternera inte två färger, utan ett godtyckligt antal. Låt oss för detta lagra en array med CSS-klasser:

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

Låt oss skriva färgerna för våra klasser:

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

Och nu implementerar vi alterneringen:

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;
		}
	});
}

Förklara hur min kod fungerar.