JavaScript-də çoxlu elementləri göstərmək düymələri

İndi tutaq ki, bizim çoxlu abzaslarımız var və hər birinin gizlətmək üçün öz düyməsi var:

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

Elə edək ki, düyməyə kliklədikdə uyğun olan abzas gizlənsin və ya göstərilsin.

Bunun üçün bizim nəticədə düymələri abzalarımızla əlaqələndirməyimiz lazımdır. Bunun üçün bir neçə üsul var.

Birinci üsul

Düymələri və abzasları aşağıdakı kimi əlaqələndirək:

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

İndi hər hansı bir düyməyə kliklədikdə biz onun data-elem atributunun dəyərini oxuyacağıq və o id-li abzası axtaracağıq. Məhz onu toggle edəcəyik. Təsvir ediləni reallaşdıraq:

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

Mənim həllimi öyrənin, sonra isə müstəqil olaraq, mənim koduma baxmadan, bu məsələni həll edin.

İkinci üsul

Id və data-atributları qoymaq çox rahat deyil. Gəlin elə edək ki, əlaqə sıra nömrəsi ilə olsun: ilk düymə birinci abzası gizlətsin, ikinci düymə - ikincini və s.

Təsvir ediləni reallaşdıraq:

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

Mənim həllimi öyrənin, sonra isə müstəqil olaraq, mənim koduma baxmadan, bu məsələni həll edin.

Üçüncü üsul

Göründüyü kimi, düymə ilə əlaqəli abzas onun soldakı qonşusudur. Bunu əlaqə kimi istifadə etmək olar:

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

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

Mənim həllimi öyrənin, sonra isə müstəqil olaraq, mənim koduma baxmadan, bu məsələni həll edin.