Применение обработчика клика к конкретному элементу. Как использовать this?

Question

Есть однотипные кнопки, по клику на любую из них должна поворачиваться стрелка, для этого я в цикле вешаю обработчик на каждую из них и тогглю у стрелки класс. Но если применять `querySelector`, то обработчик применится только к первому подходящему элементу, а `querySelectorAll`, то будет ошибка. Как я понимаю, нужно использвать `this`, но я не знаю как...

const btns = document.getElementsByClassName('btn');

[...btns].forEach(btn => btn.addEventListener('click', () => {
  const arrow = document.querySelectorAll('.arrow');
  arrow.classList.toggle("_active");
}));

.btn {
  padding: 20px 50px;
  border: 2px solid #fff;
  background: navy;
  color: #fff;
}

.arrow {
  transform: rotate(90deg);
}

._active {
  transform: rotate(-90deg);
}

<button class="btn">Кнопка
      <svg class="arrow" width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M15 30C23.2843 30 30 23.2843 30 15C30 6.71573 23.2843 -1.01779e-06 15 -6.55671e-07C6.71573 -2.93554e-07 2.93554e-07 6.71573 6.55671e-07 15C1.01779e-06 23.2843 6.71573 30 15 30Z" fill="#ECECEC"/> <path d="M14 20L19 15L14 10" stroke="black"/> </svg>
    </button>
<button class="btn">Кнопка
      <svg class="arrow" width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M15 30C23.2843 30 30 23.2843 30 15C30 6.71573 23.2843 -1.01779e-06 15 -6.55671e-07C6.71573 -2.93554e-07 2.93554e-07 6.71573 6.55671e-07 15C1.01779e-06 23.2843 6.71573 30 15 30Z" fill="#ECECEC"/> <path d="M14 20L19 15L14 10" stroke="black"/> </svg>
    </button>
<button class="btn">Кнопка
      <svg class="arrow" width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M15 30C23.2843 30 30 23.2843 30 15C30 6.71573 23.2843 -1.01779e-06 15 -6.55671e-07C6.71573 -2.93554e-07 2.93554e-07 6.71573 6.55671e-07 15C1.01779e-06 23.2843 6.71573 30 15 30Z" fill="#ECECEC"/> <path d="M14 20L19 15L14 10" stroke="black"/> </svg>
    </button>

Answer 1

const btns = document.querySelectorAll('.btn');
const arrow = document.querySelectorAll('.arrow');

btns.forEach((btn, index) =>
  btn.addEventListener('click', () => {
    arrow[index].classList.toggle('_active');
  })
);

.btn {
  padding: 20px 50px;
  border: 2px solid #fff;
  background: navy;
  color: #fff;
}

.arrow {
  transform: rotate(90deg);
}

._active {
  transform: rotate(-90deg);
}

<button class="btn">Кнопка
<svg class="arrow" width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M15 30C23.2843 30 30 23.2843 30 15C30 6.71573 23.2843 -1.01779e-06 15 -6.55671e-07C6.71573 -2.93554e-07 2.93554e-07 6.71573 6.55671e-07 15C1.01779e-06 23.2843 6.71573 30 15 30Z" fill="#ECECEC"/> <path d="M14 20L19 15L14 10" stroke="black"/> </svg>
</button>
<button class="btn">Кнопка
<svg class="arrow" width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M15 30C23.2843 30 30 23.2843 30 15C30 6.71573 23.2843 -1.01779e-06 15 -6.55671e-07C6.71573 -2.93554e-07 2.93554e-07 6.71573 6.55671e-07 15C1.01779e-06 23.2843 6.71573 30 15 30Z" fill="#ECECEC"/> <path d="M14 20L19 15L14 10" stroke="black"/> </svg>
</button>
<button class="btn">Кнопка
<svg class="arrow" width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M15 30C23.2843 30 30 23.2843 30 15C30 6.71573 23.2843 -1.01779e-06 15 -6.55671e-07C6.71573 -2.93554e-07 2.93554e-07 6.71573 6.55671e-07 15C1.01779e-06 23.2843 6.71573 30 15 30Z" fill="#ECECEC"/> <path d="M14 20L19 15L14 10" stroke="black"/> </svg>
</button>

БЛОГ НА HUSL

Применение обработчика клика к конкретному элементу. Как использовать this?

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