DOM Elementlərinin dublikatsiz alınması
Tutaq ki, bizim abzaslar və düymə var:
<p>aaa</p>
<p>bbb</p>
<p>ccc</p>
<p>ddd</p>
<p>eee</p>
<button>click me</button>
Istifadəçi bu abzasların üzərinə ixtiyari
qaydada klik etsin. Gəlin elə edək ki,
düyməyə basıldıqda hər bir klik edilmiş
abzasın sonuna nida işarəsi əlavə olunsun.
Məsələni Set vasitəsilə həll edək.
Başlayaq. Əvvəlcə elementlərimizi dəyişənlərə əldə edək:
let button = document.querySelector('button');
let elems = document.querySelectorAll('p');
Yeni Set kolleksiyası yaradaq:
let set = new Set;
Abzasları dövrə ilə gəzib onlara klik hadisəsi əlavə edək:
for (let elem of elems) {
elem.addEventListener('click', function() {
});
}
Gəlin indi abzasa klik edəndə həmin abzası kolleksiyaya əlavə edək:
for (let elem of elems) {
elem.addEventListener('click', function() {
set.add(this);
});
}
Set kolleksiyasından istifadə etdiyimiz üçün
abzasa təkrar klik onun dublikat kimi
əlavə olunmasına səbəb olmayacaq.
Gəlin indi düyməyə klik edəndə kolleksiyamızın tərkibini gəzək və hər abzasın sonuna nida işarəsi əlavə edək:
button.addEventListener('click', function() {
for (let elem of set) {
elem.textContent = elem.textContent + '!';
}
});
Abzaslar və düymə verilib. Istifadəçi bu abzasların üzərinə ixtiyari qaydada klik edir. Elə edin ki, düyməyə basıldıqda hər bir klik edilmiş abzasın sonuna nida işarəsi əlavə olunsun.
