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

Менин чечимди үйрөнүңүз, анан өз алдыңызча, менин кодго карабастан, бул тапшырманы чечиңиз.