使用 JS（无 Jquery）切换 html IMG 元素的类

Question

我放弃...您所有的答案只是针对本地元素的不同方式。

如果您费心实际阅读我所说的内容，您会意识到这与我已有的代码无关，只是该代码不适用于 IMG 标签。

在试图展示我的问题时（并且您的解决方案都没有与已经发生的事情有任何不同），我发现我可以通过将灰度滤镜应用于放置在每个图像上的 DIV 元素来实现我想要的.然后，鼠标悬停事件会触发 DIV 元素中的不透明度更改。

我想要的有点重，但它回答了我的实际问题。答案是：

是的，可能有一种方法可以切换 IMG 标签的类别。但是不，如果不引起争论或被告知我正在使用“错误代码”，我可能不会在这里找到它。所以是的，定位 DIV 元素更容易、更有效。

顺便说一句，页面加载时间与数据包的大小有关。较大的数据包（图像、html/css/js 文档等）需要更长的下载时间，因此页面需要更长的加载时间。我正在尝试创建的网站证明了这一论点，我有一个几乎完整且（几乎）功能齐全的网站，其中包含大量“聪明”的小效果，全部小于 20mb，其中大约 15mb 是图像。该网站简洁明了，托管在我的三星 Galaxy Tab 4（使用木瓜）上，几乎可以立即加载。

这就是我所说的“我希望它非常精简”的意思。感谢大家的帮助，很遗憾我无法让任何人了解发生了什么。

Answer 1

如果您将onClick 添加到不需要传递任何内容的图像元素，您将收到包含所有信息的MouseEvent。您需要来自事件的target。

我建议不要在元素上使用onClick，因为它不可扩展，你必须将它添加到所有元素中。最好将侦听器添加到包装/容器元素，然后通过某些属性过滤目标，例如data-something 请检查fiddle

所以你有包装元素和图像：

<div class="images-container">
  <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" data-toggleable class="thumb-gray thumb-color" />
  <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" data-toggleable class="thumb-gray" />
  <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" data-toggleable class="thumb-gray" />
</div>

然后你将监听器附加到你的 wrapping 元素上。这是最佳实践，因为您无需将侦听器附加到每个元素，同时您可以轻松扩展您的解决方案

var imagesContainerEl = document.querySelector('.images-container');

imagesContainerEl.addEventListener('click', function(event) {
    var element = event.target;
    if (element.hasAttribute('data-toggleable')) {
      element.classList.toggle('thumb-color');
  }
});

可以扩展相同的代码以支持mouseover 和mouseout。检查fiddle2。一个功能来统治他们并在黑暗中束缚他们..

var imagesContainerEl = document.querySelector('.images-container');

imagesContainerEl.addEventListener('mouseover', onToggleImage);
imagesContainerEl.addEventListener('mouseout', onToggleImage);


function onToggleImage(event) {
    var element = event.target;
    if (element.hasAttribute('data-toggleable')) {
      element.classList.toggle('thumb-color');
  }
}

还更新了fiddle，它展示了如何制作图像灰度/彩色

Answer 2

是您在问题中所指的

onClick="colorFunction(image1)"

一个 内联 javascript 事件监听器？

如果是这样，请尝试将其替换为：

onClick="colorFunction(this)"

并将colorFunction()改写为：

function colorFunction(image) {
    image.classList.toggle('thumb-color');
}