Кнопки и блоки с одинаковыми классами

Question

Как можно переписать данный код, чтобы по клику на каждую отдельную кнопку доп классы применялись к конкретным span и span2 в рамках одного блока, а не ко всем элементам во всех блоках?

let divs = document.querySelectorAll('.div');
let btns = document.querySelectorAll('.btn');
let spanGroup = document.querySelectorAll('.span');
let spanGroup2 = document.querySelectorAll('.span2');

btns.forEach(item => {
  item.addEventListener('click', () => {
    spanGroup.forEach(item => {
      item.classList.toggle('span-active');
    })
    spanGroup2.forEach(item => {
      item.classList.toggle('span2-active');
    })
  })
})

.container {
  display: flex;
}

.div {
  height: 150px;
  width: 150px;
  background: green;
  dispaly: flex;
  border: 1px solid black;
  margin: 2px;
}

.span {
  width: 35px;
  height: 15px;
  background: blue;
  display: flex;
  margin: 0 0 10px 0;
}

.span2 {
  width: 35px;
  height: 15px;
  background: purple;
  display: flex;
  margin: 10px 0 0 0;
}

.span-active {
  background: orange;
}

.span2-active {
  background: red;
}

<div class="container">
  <div class="div">
    <span class="span"></span>
    <button class="btn">Button</button>
    <span class="span2"></span>
  </div>
  <div class="div">
    <span class="span"></span>
    <button class="btn">Button</button>
    <span class="span2"></span>
  </div>
  <div class="div">
    <span class="span"></span>
    <button class="btn">Button</button>
    <span class="span2"></span>
  </div>
</div>

Answer 1

Так как класс меняется одновременно для обоих .span, то правильнее будет менять класс .active у их общего предка, а также немного изменить правила в стилях:

let btns = document.querySelectorAll('.btn');

btns.forEach((item) => {
  item.addEventListener('click', (el) => {
    el.target.closest('.div').classList.toggle('active');
  });
});

.container { display: flex; }

.div {
  margin: 2px;
  dispaly: flex;
  height: 150px; width: 150px;
  border: 1px solid black;
  background: green;
}

.span {
  margin: 0 0 10px 0;
  display: flex;
  height: 15px; width: 35px;
  background: blue;
}
.active .span { background: orange; }

.span2 {
  margin: 10px 0 0 0;
  display: flex;
  height: 15px; width: 35px;
  background: purple;
}
.active .span2 { background: red; }

<div class="container">
  <div class="div">
    <span class="span"></span>
    <button class="btn">Button</button>
    <span class="span2"></span>
  </div>
  <div class="div">
    <span class="span"></span>
    <button class="btn">Button</button>
    <span class="span2"></span>
  </div>
  <div class="div">
    <span class="span"></span>
    <button class="btn">Button</button>
    <span class="span2"></span>
  </div>
</div>

БЛОГ НА HUSL

Кнопки и блоки с одинаковыми классами

Ответы (1 шт):