JavaScript-de köp elementleri görkezmek düwmeleri

Indi diýelim biziň her biriniň öz gizlemek düwmesi bolan köp abzaslarymyz bar:

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

Düwmä basylanda, şoňa degişli abzas ya gizlenmeli ýada görkezilmeli bolşy ýaly edeliň.

Bun üçin biz nädipdir düwmeleri abzaslarymyz bilen baglamaly. Bun üçin birnäçe usul bar.

Birinji usul

Düwmeler we abzaslar aşakdaky ýaly baglalyň:

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>

Indi haýsy bir düwmä basylsa-da, biz onuň data-elem atributynyň mazmunyny okarys we şoňa meňzeş id-li abzazy gözleýäris. Ony toggle ederis. Beýan edileni amala aşyralyň:

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

Ikinji usul

Id we data-atributlary goýmak ýeterlik derejede amatly däl. Geliň baglanyşyk tertip belgisi boýunça bolşy ýaly edeliň: birinji düwme birinji abzazy gizlesin, ikinji düwme ikinji abzazy gizlesin we ş.m.

Beýan edileni amala aşyralyň:

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

Üçünji usul

Görşüňiz ýaly, düwme bilen baglanyşykly abzas, onuň çep tarapyndaky goňşysydyr. Muny baglanyşyk hökmünde ulanmak bolýar:

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

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