Afwisseling van aktiveringsstyle op JavaScript

In die vorige les het ons geleer om selle te aktiveer deur daarop te klik. Laat ons nou maak sodat kleure afwissel: laat die eerste sel rooi geverf word, die tweede - in groen, die derde - weer in rooi, ensovoorts.

Om hierdie probleem op te los, sal ons reeds twee CSS-klasse nodig hê:

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

Laat ons die beskryfde afwisseling implementeer:

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

Analiseer my kode, en herhaal dan selfstandig die oplossing van hierdie probleem.

Afwisseling van baie kleure uit 'n skikking

Gestel ons wil nou nie twee kleure afwissel nie, maar 'n arbitrêre hoeveelheid. Laat ons hiervoor 'n skikking van CSS-klasse stoor:

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

Kom ons skryf die kleure van ons klasse:

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

En nou implementeer ons die afwisseling:

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

Verduidelik hoe die kode wat ek aangehaal het werk.