Anvendelse af Map-samlinger

Lad os sige, at vi har disse afsnit:

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

Lad os gøre det sådan, at når der klikkes på hvert afsnit, skrives dets rækkenummer i slutningen af afsnittet. Lad os løse opgaven ved hjælp af Map.

Lad os komme i gang. Først henter vi vores afsnit ind i en variabel:

javascriptlet elems = document.querySelectorAll('p');

Lad os oprette en ny Map-samling:

javascriptlet map = new Map;

Lad os udfylde vores samling, så nøglerne er vores afsnit, og deres værdier er rækkenumre:

javascriptlet i = 1;
for (let elem of elems) {
  map.set(elem, i++);
}

Lad os iterere gennem afsnittene med en løkke og tilføje en klik-håndtering til dem:

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

Lad os nu tilføje rækkenummeret til slutningen af afsnittets tekst, når der klikkes. Vi vil hente dette nummer fra vores samling:

javascriptfor (let elem of elems) {
  elem.addEventListener('click', function() {
    this.textContent += map.get(this);
  });
}