Përdorimi i Koleksioneve Map

Le të themi se kemi këto paragrafë:

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

Le t'i bëjmë të tillë që me klikim në çdo paragraf, në fund të tij të shkruhet numri i tij radhë në listën e paragrafëve. Le ta zgjidhim këtë problem duke përdorur Map.

Le të fillojmë. Së pari, le t'i marrim paragrafët tanë në një variabël:

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

Le të krijojmë një koleksion të ri Map:

javascriptlet map = new Map;

Le ta plotësojmë koleksionin tonë në mënyrë që çelësat të jenë paragrafët tanë, dhe vlerat e tyre të jenë numrat radhë:

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

Le t'i përsërisim paragrafët me një cikël dhe t'u lidhim atyre një përgjigjës ndaj klikimit:

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

Tani, me klikim, le të shtojmë numrin radhë në fund të tekstit të paragrafit. Në të njëjtën kohë, le ta marrim këtë numër nga koleksioni ynë:

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