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

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