Көптеген элементтерді 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-і бар абзацты іздейміз. Сол абзацты тогльдейміз. Сипатталғанды іске асырайық:

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

Менің шешімімді зерттеп шығыңыз, содан кейін өз бетіңізше, менің кодымға қарамастан, осы мәселені шешіңіз.