კოლექცია Map-ის გამოყენება

დავუშვათ, გვაქვს პარაგრაფები:

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

დავაყენოთ, რომ ყოველ პარაგრაფზე დაწკაპუნებისას მას ბოლოში ჩაიწეროს მისი რიგითი ნომერი პარაგრაფების სიაში. ამოცანა ამოვხსნათ Map-ის მეშვეობით.

დავიწყოთ. ჯერ მოვიპოვოთ ჩვენი პარაგრაფები ცვლადში:

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

შევქმნათ ახალი კოლექცია Map:

javascriptlet map = new Map;

შევავსოთ ჩვენი კოლექცია ისე, რომ გასაღებები იყოს ჩვენი პარაგრაფები, ხოლო მათი მნიშვნელობები - რიგითი ნომრები:

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

ციკლით გადავუყვეთ პარაგრაფებს და დავამატოთ მათზე დაწკაპუნების დამმუშავებელი:

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

ახლა დავაყენოთ, რომ დაწკაპუნებისას ჩავამატოთ რიგითი ნომერი პარაგრაფის ტექსტის ბოლოში. ამასთანავე მოვიპოვოთ ეს ნომერი ჩვენი კოლექციიდან:

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