Daug elementų su mygtukais rodymui JavaScript

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

<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:

<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:

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

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

Išstudijuokite mano sprendimą, o tada savarankiškai, nežiūrėdami į mano kodą, išspręskite šią užduotį.

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:

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

Išstudijuokite mano sprendimą, o tada savarankiškai, nežiūrėdami į mano kodą, išspręskite šią užduotį.

Trečias būdas

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

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

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

Išstudijuokite mano sprendimą, o tada savarankiškai, nežiūrėdami į mano kodą, išspręskite šią užduotį.