DOM elementlarini dublikatlarsiz olish

Faraz qilaylik, bizda paragraflar va tugma bor:

<p>aaa</p>
<p>bbb</p>
<p>ccc</p>
<p>ddd</p>
<p>eee</p>

<button>click me</button>

Foydalanuvchi ushbu paragraflarga ixtiyoriy tartibda klik qiladi. Keling, tugma bosilganda, har bir klik qilingan paragraf oxiriga undov belgisi qo'shiladigan qilaylik. Masalani Set yordamida yechamiz.

Keling, boshlaymiz. Avvalo, elementlarimizni o'zgaruvchilarga olamiz:

let button = document.querySelector('button');
let elems  = document.querySelectorAll('p');

Yangi Set kolleksiyasini yaratamiz:

let set = new Set;

Paragraflarni tsikl bilan aylantiramiz va ularga klik hodisasi protsessorini biriktiriamiz:

for (let elem of elems) {
	elem.addEventListener('click', function() {
		
	});
}

Keling, endi paragrafga klik qilinganda uni kolleksiyaga qo'shamiz:

for (let elem of elems) {
	elem.addEventListener('click', function() {
		set.add(this);
	});
}

Biz Set kolleksiyasidan foydalanganimiz sababli paragrafga qayta klik qilish uning dublikati qo'shilishiga olib kelmaydi.

Keling, endi tugmaga klik qilinganda kolleksiyamiz tarkibini aylantirib chiqamiz va har bir paragraf oxiriga undov belgisini qo'shamiz:

button.addEventListener('click', function() {
	for (let elem of set) {
		elem.textContent = elem.textContent + '!';
	}
});

Paragraflar va tugma berilgan. Foydalanuvchi ushbu paragraflarga ixtiyoriy tartibda klik qiladi. Tugma bosilganda, har bir klik qilingan paragraf oxiriga undov belgisi qo'shiladigan qiling.