Pobieranie elementów DOM bez duplikatów
Załóżmy, że mamy akapity i przycisk:
<p>aaa</p>
<p>bbb</p>
<p>ccc</p>
<p>ddd</p>
<p>eee</p>
<button>click me</button>
Pozwól użytkownikowi klikać na te akapity
w dowolnej kolejności. Sprawmy,
aby po naciśnięciu przycisku na końcu każdego
akapitu, na który został wykonany klik, został
dodany znak wykrzyknika. Rozwiążmy zadanie
przy użyciu Set.
Zacznijmy. Na początek pobierzmy nasze elementy do zmiennych:
let button = document.querySelector('button');
let elems = document.querySelectorAll('p');
Stwórzmy nową kolekcję Set:
let set = new Set;
Przejdźmy pętlą przez akapity i przypiszmy do nich obsługę zdarzenia kliknięcia:
for (let elem of elems) {
elem.addEventListener('click', function() {
});
}
Dodajmy teraz, aby po kliknięciu na akapit był on dodawany do kolekcji:
for (let elem of elems) {
elem.addEventListener('click', function() {
set.add(this);
});
}
Dzięki temu, że używamy kolekcji Set
ponowne kliknięcie na akapit nie będzie prowadzić
do dodania duplikatu akapitu.
Dodajmy teraz, aby po kliknięciu na przycisk przejść przez zawartość naszej kolekcji i do każdego akapitu na końcu dodać znak wykrzyknika:
button.addEventListener('click', function() {
for (let elem of set) {
elem.textContent = elem.textContent + '!';
}
});
Dane są akapity i przycisk. Użytkownik klika na te akapity w dowolnej kolejności. Spraw, aby po naciśnięciu przycisku na końcu każdego akapitu, na który został wykonany klik, został dodany znak wykrzyknika.
