Шоп-карточки- адаптация кода для нескольких карточек JS

Question

Суть вот в чем у меня есть три карточки, но функционал отрабатывает только на одной когда я просто изменяю let circle = document.querySelector(".color-option");

Но мне нужно как то данную функцию изменить для того что-бы отрабатывало на трех отдельно карточках

let circle = document.querySelector(".color-option"); //- полученый масив
circle.addEventListener("click", (e) => {
  let target = e.target;
  if (target.classList.contains("circle")) {
    circle.querySelector(".active").classList.remove("active");
    target.classList.add("active");
    document.querySelector(".main-images .active").classList.remove("active");
    document.querySelector(`.main-images .${target.id}`).classList.add("active");
  }
});

Answer 1

let circles = document.querySelectorAll(".color-option"); //- полученый масив
circles.forEach(circle => circle.addEventListener("click", (e) => {
 ...

БЛОГ НА HUSL

Шоп-карточки- адаптация кода для нескольких карточек JS

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