Stilwechsel bei der Aktivierung in JavaScript

In der vorherigen Lektion haben wir gelernt, Zellen durch Klick zu aktivieren. Lassen Sie uns nun bewirken, dass die Farben abwechselnd sind: die erste Zelle soll rot eingefärbt werden, die zweite - grün, die dritte - wieder rot und so weiter.

Um diese Aufgabe zu lösen, benötigen wir bereits zwei CSS-Klassen:

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

Implementieren wir den beschriebenen Wechsel:

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

Analysieren Sie meinen Code und wiederholen Sie dann selbstständig die Lösung dieser Aufgabe.

Wechsel mehrerer Farben aus einem Array

Angenommen, wir möchten nun nicht zwei Farben abwechseln, sondern eine beliebige Anzahl. Lassen Sie uns dafür ein Array von CSS-Klassen speichern:

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

Schreiben wir die Farben für unsere Klassen:

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

Und nun setzen wir den Wechsel um:

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

Erklären Sie, wie der von mir vorgestellte Code funktioniert.