如何在不使用大量 JavaScript 的情况下通过单击更改图像？

点击时更改图像：一种简单的方法

当面临在点击事件上动态交换图像的任务时，人们最初可能会求助于JavaScript 或 jQuery 提供快速解决方案。但是，对于更简单的场景，有一种替代方案可以避免使用大量 JavaScript 代码。

要轻松更改图像，请考虑向图像元素添加唯一 ID，如下所示：

<ul>
  <li><img src="image1.png">

接下来，创建一个简单的 JavaScript 函数来处理点击时的图像交换：

function changeImage(image) {
  // Get the current image source
  let currentSrc = image.src;

  // Replace the source with the new image
  const newSrc = currentSrc.replace(".png", "_colored.png");
  image.src = newSrc;
}

在此函数中，将检索当前图像源并将其替换为名称中包含“_colored”的新源。

最后，为每个图像添加 onclick 事件侦听器，以便在单击时调用 changeImage() 函数：

<ul>
  <li><img src="image1.png">

使用这种方法，单击即可无缝交换图像，无需复杂的 JavaScript 或伪选择器。

以上是如何在不使用大量 JavaScript 的情况下通过单击更改图像？的详细内容。更多信息请关注PHP中文网其他相关文章！