Verkryging van DOM-elemente sonder duplikate

Laat ons paragrawe en 'n knoppie hê:

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

<button>click me</button>

Laat die gebruiker op hierdie paragrawe klik in enige volgorde. Kom ons maak dit so dat met 'n druk op die knoppie aan die einde van elke paragraaf waarop geklik is, 'n uitroepteken bygevoeg word. Los die probleem op met behulp van Set.

Kom ons begin. Kry eers ons elemente in veranderlikes:

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

Skep 'n nuwe Set-versameling:

javascriptlet set = new Set;

Deurloop die paragrawe met 'n lus en koppel 'n klikhanterer daaraan:

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

Laat ons nou by 'n klik op 'n paragraaf daardie paragraaf by die versameling voeg:

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

Omdat ons die Set-versameling gebruik, sal 'n herhaalde klik op 'n paragraaf nie lei tot die byvoeging van 'n duplikaat van die paragraaf nie.

Laat ons nou by 'n klik op die knoppie die inhoud van ons versameling deurloop en aan elke paragraaf 'n uitroepteken aan die einde toevoeg:

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