javascript - 只有一个从其他元素中选择的 javascript 清除类

Question

我有一个图像 block ，我使用 css 和 JavaScript 来改变悬停时的外观，并且还希望它们是可选的。

我的图像的主要类是“MAIN”，它们都显示为灰度，当它们被点击时它们变成“SELECTED”并且是彩色的。我希望能够在单击下一个图像时从任何其他图像中删除“SELECTED”类，以便在任何时候只选择 1 个/颜色。

这是我的代码示例:

function SelAdobe() {
  document.getElementById("Adobe").className = "SELECTED";
  document.getElementById("AddSource").innerHTML = 'Add Adobe';
}

img.MAIN {
  width: 80px;
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}

img.MAIN:hover {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}

img.SELECTED {
  width: 80px;  
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}

<a href="#" onClick="SelAdobe()">
  <img src="//lorempixel.com/80/80/cats/3" id="Adobe" class="MAIN">
</a>

当点击任何图像时，我可以在这里的某个地方检查并删除任何以前带有“SELECTED”类的图像吗？

Answer 1

当然。在添加新的 SELECTED 类之前，只需从行中包含该类的任何图像中删除该类。

function SelAdobe() {
  var selectedImages = document.querySelector("img.SELECTED");
  if (selectedImages) {
      selectedImages.classList.remove("SELECTED");
  }
  document.getElementById("Adobe").className = "SELECTED";
  document.getElementById("AddSource").innerHTML = 'Add Adobe';
}

img.MAIN {
  width: 80px;
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}

img.MAIN:hover {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}

img.SELECTED {
  width: 80px;  
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}

<a href="#" onClick="SelAdobe()">
  <img src="//lorempixel.com/80/80/cats/3" id="Adobe" class="MAIN">
</a>