не могу задать каждой кнопке открытие определенного блока в js

Рейтинг: 0Ответов: 1Опубликовано: 26.03.2023

При нажатии на 1 кнопку срабатывают сразу все введите сюда описание изображения

let btns = document.querySelectorAll(".btn-show");
let blocks = document.querySelectorAll(".dir-info-block");

btns.forEach((btn) => {
  blocks.forEach((block) => {
    console.log(btn.id, block.id);
    let cbtn = document.getElementById(`${btn.id}`);
    let cblock = document.getElementById(`${block.id}`);
    cbtn.addEventListener("click", () => {
      cblock.classList.toggle("dir-info-block-visible");
      cblock.classList.toggle("hide");
    });
  });
});

/* Вывод:
    bt1 dib1
    bt1 dib2
    bt1 dib3
    bt1 dib4
    bt1 dib5
    bt1 dib6
    bt1 dib7
    bt1 dib8
    bt1 dib9
    bt1 dib10
    bt1 dib11
    bt1 dib12
    bt1 dib13
    bt1 dib14
    bt2 dib1
    bt2 dib2
    bt2 dib3
    bt2 dib4
    bt2 dib5
    bt2 dib6
    bt2 dib7
    bt2 dib8
    bt2 dib9
    bt2 dib10
    bt2 dib11
    bt2 dib12
    bt2 dib13
    bt2 dib14
    bt3 dib1
    bt3 dib2
    bt3 dib3
    bt3 dib4
    bt3 dib5
    bt3 dib6
    ...
    (bt - кнопка, dib - блок)
*/

javascript frontend
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Вы добавляете избыточный обход списка блоков. Ориентироваться на идентификатор блока не обязательно, для решения задачи можно использовать знание о структуре блоков и ссылочные атрибуты для обхода DOM, но использовать идентификаторы также возможно. Ниже примерный код, для решения вашей задачи через ссылочные атрибуты от event.target:

html

<div class='block'>
  <div class="content visible">Блок 1</div>
  <button class="toggle">Показать/скрыть</button>
</div>
<div class='block'>
  <div class="content">Блок 2</div>
  <button class="toggle">Показать/скрыть</button>
</div>

css

.block {
  border: 1px solid black;
}
.content {
  display: none;
}
.visible {
  display: block;
}

js

const toggle = (event) => {
  event.target.parentElement.querySelector('.content').classList.toggle('visible');
}

const btns = document.querySelectorAll('.toggle');
btns.forEach(btn => {
  btn.addEventListener('click', toggle);
});