从其他元素中仅选择一个 javascript 清除类

Question

我有一个图像块，我使用 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>

Answer 2

我稍微更改了您的 HTML 结构，我已将图像包装在单个 div 中，并使用它来侦听单击事件。它减少了事件侦听器的数量，如果您想更改方法名称，您不必在 HTML 中进行大量更改。

除此之外，您可以检查库中是否存在具有SELECTED 类的项目，并将其从该元素中删除，然后再将其分配给新元素。当SELECTED 类没有元素时，querySelector 方法返回null，所以一定要检查一下。

const
  gallery = document.getElementById('gallery');
 
function onClickHandler(event) {
  if (event.target.tagName.toLowerCase() !== 'img') {
    return;
  }
  
  const
    selectedImage = gallery.querySelector('.SELECTED');
  if (selectedImage !== null) {
    selectedImage.classList.remove('SELECTED');
  }
  
  event.target.classList.add('SELECTED');
}
 
gallery.addEventListener('click', onClickHandler);

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);
}

<div id="gallery">
  <img src="//lorempixel.com/80/80/cats/3" id="Cat1" class="MAIN">
  <img src="//lorempixel.com/80/80/cats/4" id="Cat2" class="MAIN">
  <img src="//lorempixel.com/80/80/cats/5" id="Cat3" class="MAIN">
</div>

Answer 3

这应该对你有帮助：

function onImageClick(event) {
  const selectedCls = 'selected';
  
  Array
    .prototype
    .forEach
    .call(document.querySelectorAll('#test .selectable'), (
      image => image !== event.target 
        ? image.classList.remove(selectedCls)
        : image.classList.add(selectedCls)
    ))
  ;
}

document
  .querySelector('#test')
  .addEventListener('click', (
    event => event.target.classList.contains('selectable') && 
    onImageClick(event)
  ))
;

.selectable {
  cursor: pointer;
  opacity: .3;
  transition: 300ms opacity linear;
}

.selectable:hover {
  opacity: .8;
}

.selectable.selected {
  opacity: 1;
}

<div id="test">
  <img class="selectable" src="http://lorempixel.com/50/50/sports/1" />
  <img class="selectable" src="http://lorempixel.com/50/50/sports/2" />
  <img class="selectable" src="http://lorempixel.com/50/50/sports/3" />
  <img class="selectable" src="http://lorempixel.com/50/50/sports/4" />
  <img class="selectable" src="http://lorempixel.com/50/50/sports/5" />
  <img class="selectable" src="http://lorempixel.com/50/50/sports/6" />
</div>