Блог

Я написал код для этого, когда пользователь нажимает на div, значок внутри div поворачивается на 45 градусов. Тем не менее, это работает только в том случае, если пользователь нажимает на сам значок, а не в любом месте вокруг div, в центре которого он находится. Моя цель состоит в том, чтобы это работало, если пользователь щелкает в любом месте div и, конечно, если щелкает сам значок. Любой совет всегда приветствуется. Заранее спасибо.

 
Array.from(toggleBtn).forEach((el) =>
  el.addEventListener("click", (event) => {
    const card = event.target.closest(".director__card");
    const iconBox = event.target.closest(".director__card--iconBox");
    const icon = event.target.closest(".director__card--icon");
    card.classList.toggle("flipped");
    if (card.classList.contains("flipped")) {
      iconBox.classList.add("switched");
      icon.classList.add("rotate");
    } else {
      iconBox.classList.remove("switched");
      icon.classList.remove("rotate");
    }
  })
);

 

 <div class="director__card">
                <div class="director__card--frontside">
                <img class="director__card--avatar" src="${card.image}" alt="director-img" />
                <h1 class="director__card--title">${card.name}</h1>
                <p class="director__card--role">${card.role}</p>
                <div class="director__card--iconBox">
                <img class="director__card--icon" src="${card.icon}" alt="icon" />
                </div>
                </div>
</div>

 

Я визуализирую элементы, сопоставляя массив объектов-