Бисёр элементҳо бо тугмаҳои намоиш дар JavaScript

Бигзор акнун мо бисёр абзасҳо дорем ва барои ҳар кадоме тугмаи худро барои пинҳон кардан дорад:

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

Биёед чунон кунем, ки пас аз клик кардан рӯи тугма абзаси мувофиқ он пинҳон ё нишон дода шавад.

Барои ин мо ба тавре бояд тугмаҳоро бо абзасҳои худ алоқаманд кунем. Барои ин чанд роҳ вуҷуд дорад.

Роҳи якум

Тугмаҳо ва абзасҳоро ба тариқи зерин алоқаманд кунем:

<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-ро меҷӯем. Ҳаминро toggle хоҳем кард. Он чӣ тавсиф шудро амалӣ мекунем:

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

Ҳалли маро омӯзед, ва сипас худ, бе назар кардан ба рамзи ман, ин масъаларо ҳал кунед.

Роҳи дуюм

Гузоштани id ва data-сифатҳо хеле удобур нест. Биёед чунон кунем, ки алоқа тавассути рақами тартибӣ бошад: бигзор тугмаи якум абзаси якумро пинҳон кунад, тугмаи дуюм - абзаси дуюм ва ғайра.

Он чӣ тавсиф шудро амалӣ мекунем:

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

Ҳалли маро омӯзед, ва сипас худ, бе назар кардан ба рамзи ман, ин масъаларо ҳал кунед.

Роҳи сеюм

Чунон ки мушоҳида мешавад, абзасе, ки бо тугма алоқаманд аст, ҳамсояи чапи он мебошад. Инро метавон ба унвони алоқа истифода бурд:

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

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

Ҳалли маро омӯзед, ва сипас худ, бе назар кардан ба рамзи ман, ин масъаларо ҳал кунед.