單擊另一個元素時如何刪除類？

Question

我想創建一個簡單的畫廊。 單擊圖像時，它會調整大小。 但是，當我單擊另一個圖像時，第一個圖像仍然處於活動狀態。 單擊另一個圖像時如何刪除類？

const imgList = document.querySelectorAll("img");
console.log(imgList);
for (let i = 0; i < imgList.length; i++) {
  imgList[i].addEventListener("click", function () {
    imgList[i].classList.toggle("bigger");
  });
}

Answer 1

無需復雜化，您只需重置從所有圖像中刪除bigger圖像並將其設置為單擊的圖像

const imgList = document.querySelectorAll("img");

for (let i = 0; i < imgList.length; i++) {
  imgList[i].addEventListener("click", function () {

    imgList.forEach(el=> el.classList.remove("bigger"))

    imgList[i].classList.add("bigger");
  });
}

Answer 2

有幾種方法可以解決此類問題。 一種方法是簡單地找到先前選擇的項目並在單擊新項目時刪除該類：

const previousSelection = document.querySelector("img.bigger");
if (previousSelection) previousSelection.classList.remove("bigger")