აქტივაციის სტილების მონაცვლეობა JavaScript-ში

წინა გაკვეთილში ჩვენ ვისწავლეთ უჯრების აქტივაცია მათზე დაწკაპუნებით. ახლა კი მოდით გავაკეთოთ ისე, რომ ფერების მონაცვლეობა მოხდეს: პირველი უჯრა დაიფაროს წითლად, მეორე - მწვანედ, მესამე - ისევ წითლად და ასე შემდეგ.

ამ ამოცანის გადასაჭრელად ჩვენ გვჭირდება უკვე ორი CSS კლასი:

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

განვახორციელოთ აღწერილი მონაცვლეობა:

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

გაანალიზეთ ჩემი კოდი, შემდეგ კი დამოუკიდებლად გაიმეორეთ ამ ამოცანის ამოხსნა.

მრავალი ფერის მონაცვლეობა მასივიდან

ახლა დავუშვათ, ჩვენ გვსურს არა ორი ფერის მონაცვლეობა, არამედ ნებისმიერი რაოდენობის. მოდით ამისთვის CSS კლასების მასივი შევინახოთ:

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

დავწეროთ ჩვენი კლასების ფერები:

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

ახლა კი განვახორციელოთ მონაცვლეობა:

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

ახსენით, როგორ მუშაობს ჩემს მიერ მოყვანილი კოდი.