Anwendung von Map-Collections

Nehmen wir an, wir haben Absätze:

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

Lassen Sie uns bewirken, dass bei einem Klick auf jeden Absatz seine laufende Nummer in der Liste der Absätze an sein Ende geschrieben wird. Lösen wir die Aufgabe mit Map.

Fangen wir an. Zuerst holen wir unsere Absätze in eine Variable:

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

Erstellen wir eine neue Map-Collection:

javascriptlet map = new Map;

Füllen wir unsere Collection so, dass die Schlüssel unsere Absätze sind und ihre Werte die laufenden Nummern sind:

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

Durchlaufen wir die Absätze mit einer Schleife und hängen einen Klick-Eventhandler an sie:

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

Lassen Sie uns nun bei einem Klick die laufende Nummer an das Ende des Absatztextes anhängen. Dabei holen wir diese Nummer aus unserer Collection:

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