JavaScript හි බොත්තම් සහිත බොහෝ අංග

දැන් අප සතුව බොහෝ ඡේද සහ එක් එක් සඳහා සැඟවීම සඳහා තමන්ගේම බොත්තමක් ඇතැයි සිතමු:

html<p>1</p><button>toggle</button>
<p>2</p><button>toggle</button>
<p>3</p><button>toggle</button>

බොත්තමක් මත ක්ලික් කිරීමෙන් ඊට අනුරූප ඡේදය සැඟවීම හෝ පෙන්වීම සිදු කරමු.

මේ සඳහා අපට යම් ආකාරයකින් බොත්තම් අපගේ ඡේද සමඟ සම්බන්ධ කළ යුතුය. මේ සඳහා පවතින්නේ ක්‍රම කිහිපයකි.

පළමු ක්‍රමය

බොත්තම් සහ ඡේද පහත පරිදි සම්බන්ධ කරමු:

html<p id="elem1">1</p><button data-elem="elem1">toggle</button>
<p id="elem2">2</p><button data-elem="elem2">toggle</button>
<p id="elem3">3</p><button data-elem="elem3">toggle</button>

දැන් ඕනෑම බොත්තමක් මත ක්ලික් කිරීමේදී අපි එහි data-elem ගුණාංගයේ අන්තර්ගතය කියවා එම id සහිත ඡේදය සොයමු. එය ටොගල් කරන්නෙමු. විස්තර කර ඇති දේ ක්‍රියාත්මක කරමු:

javascriptlet buttons = document.querySelectorAll('button');

for (let button of buttons) {
  button.addEventListener('click', function() {
    let elem = document.querySelector('#' + this.dataset.elem);
    elem.classList.toggle('hidden');
  });
}

දෙවන ක්‍රමය

id සහ data-ගුණාංග පිහිටුවීම ඉතා පහසු නොවේ. සම්බන්ධතාවය අනුක්‍රමික අංකය අනුව වන පරිදි කරමු: පළමු බොත්තම පළමු ඡේදය සැඟවීමට ද, දෙවන බොත්තම දෙවන ඡේදය සැඟවීමට ද සහ එසේම වේවා.

විස්තර කර ඇති දේ ක්‍රියාත්මක කරමු:

javascriptlet buttons = document.querySelectorAll('button');
let elems   = document.querySelectorAll('p');

for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function() {
    elems[i].classList.toggle('hidden');
  });
}

තෙවන ක්‍රමය

දැකිය හැකි පරිදි, බොත්තම සමඟ සම්බන්ධ වූ ඡේදය, එහි වම් පස ඇති අසල්වැසියා වේ. මෙය සම්බන්ධතාවයක් ලෙස භාවිතා කළ හැකිය:

javascriptlet buttons = document.querySelectorAll('button');

for (let button of buttons) {
  button.addEventListener('click', function() {
    this.previousElementSibling.classList.toggle('hidden');
  });
}