Question

我有一块图像，我使用css和JavaScript来改变悬停时的外观，还希望它们可以选择。

我的图像的主要类别是“MAIN”，它们都显示为灰度，当它们被点击时它们变为“已选择”并被着色。我希望能够在单击下一个图像时从任何其他图像中删除“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类之前，只需从包含该行的任何图像中删除该类。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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>

只有一个选中的javascript clear class来自其他元素

3 个答案: