JavaScript'те көп элементтерди көрсөтүү баскычтары

Эми бизде бир нече абзац бар жана ар биринин жашыруу үчүн өз баскычы бар деп коёлу:

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

Баскычты басканда тиешелүү абзац жашырылышы же көрсөтүлүшү үчүн аны жасайлы.

Бул үчүн биз бир жол менен баскычтарды абзацтарга байланыштырышыбыз керек. Бул үчүн бир нече жол бар.

Биринчи жол

Баскычтарды жана абзацтарды төмөнкүдөй байланыштыралы:

html<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'дейбиз. Сүрөттөлгөндөрдү ишке ашыралы:

javascriptlet 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-атрибуттарды коюу абдан ыңгайлуу эмес. Келгиле, байланыш тартиптин номери боюнча болсун: биринчи баскыч биринчи абзацты жашырсын, экинчи баскыч - экинчини жана ушул сыяктуу.

Сүрөттөлгөндөрдү ишке ашыралы:

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

Үчүнчү жол

Көрүнүп тургандай, баскычка байланыштуу абзац, анын сол жактагы коңшусу болуп саналат. Муну байланыш катары колдонсо болот:

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

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