მრავალი ელემენტი ღილაკებით ჩვენების 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');
	});
}