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);
  });
}