Daug elementų su mygtukais rodymui JavaScript

Tarkime, kad dabar turime daug pastraipų ir kiekviena turi savo mygtuką paslėpimui:

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

Padarykime taip, kad paspaudus mygtuką būtų paslėpta arba rodoma atitinkama jam pastraipa.

Kad tai padarytume, kažkaip turime susieti mygtukus su mūsų pastraipomis. Tam yra keletas būdų.

Pirmas būdas

Susiekime mygtukus ir pastraipas taip:

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>

Dabar paspaudus bet kurį mygtuką mes skaitysime jo data-elem atributo turinį ir ieškosime pastraipos su tokiu id. Jos ir slėpsime/rodysime. Įgyvendinkime tai:

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

Antras būdas

Idėti id ir data-atributus nėra labai patogu. Padarykime taip, kad ryšys būtų pagal eilės numerį: tegul pirmas mygtukas slepia pirmą pastraipą, antras mygtukas - antrą ir taip toliau.

Įgyvendinkime tai:

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

Trečias būdas

Kaip galima pamatyti, pastraipa, susijusi su mygtuku, yra jo kairysis kaimynas. Tai galima panaudoti kaip ryšį:

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

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