Aktivizācijas stilu maiņa JavaScript

Iepriekšējā nodarbībā mēs iemācījāmies aktivizēt šūnas, uz tām noklikšķinot. Tagad padarīsim tā, lai notiktu krāsu maiņa: lai pirmā šūna iekrāsojas sarkanā, otrā - zaļā, trešā - atkal sarkanā un tā tālāk.

Lai atrisinātu šo uzdevumu, mums būs nepieciešami divi CSS klasi:

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

Īstenosim aprakstīto maiņu:

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

Izpētiet manu kodu un pēc tam patstāvīgi atkārtojiet šī uzdevuma risinājumu.

Daudzu krāsu maiņa no masīva

Tagad pieņemsim, ka vēlamies mainīt ne divas krāsas, bet patvaļīgu daudzumu. Lai to panāktu, saglabāsim CSS klases masīvu:

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

Uzrakstīsim mūsu klases krāsas:

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

Un tagad īstenosim maiņu:

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

Paskaidrojiet, kā darbojas mans dotais kods.