Izmenično preklapljanje slogov v JavaScript

V prejšnji lekciji smo se naučili aktivirati celice s klikom nanje. Zdaj pa naredimo, da se barve izmenjujejo: prva celica naj bo obarvana rdeče, druga - zeleno, tretja - spet rdeče in tako naprej.

Za rešitev te naloge bomo potrebovali že dva CSS razreda:

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

Implementirajmo opisano izmenično preklapljanje:

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

Analizirajmo mojo kodo, nato pa samostojno ponovite rešitev te naloge.

Izmenjavanje več barv iz matrike

Recimo, da zdaj želimo izmenjevati ne dve barvi, ampak poljubno število. Za to naj shranjujemo matriko CSS razredov:

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

Zapišimo barve naših razredov:

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

In zdaj implementirajmo izmenično preklapljanje:

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

Pojasnite, kako deluje zgoraj navedena koda.