Alternering af aktiveringsstile i JavaScript

I den forrige lektion lærte vi at aktivere celler ved at klikke på dem. Lad os nu gøre det sådan, at farverne skifter: lad den første celle farves rød, den anden - grøn, den tredje - igen rød og så videre.

For at løse denne opgave har vi brug for to CSS-klasser:

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

Lad os implementere den beskrevne alternering:

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

Gennemgå min kode, og gentag derefter løsningen på denne opgave selvstændigt.

Alternering af mange farver fra et array

Lad os nu sige, at vi ikke kun vil alternere to farver, men et vilkårligt antal. For at gøre dette vil vi gemme et array af CSS-klasser:

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

Lad os skrive farverne for vores klasser:

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

Og nu implementerer 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;
		}
	});
}

Forklar, hvordan den viste kode fungerer.