时间戳

首页 > 解决方案 > 重复单击图像后，如何将图像更改为其他版本？

javascript - 重复单击图像后，如何将图像更改为其他版本？

问题描述

我正在用 HTML/CSS/JS 制作一个简单的项目。我想让一个灯泡打开和关闭。我将这两个图像都放在同一个目录中，到目前为止，我已经能够制作它，因此当我单击它时它会关闭。但是，在那之后，我不能再点击它了。

我希望能够一次又一次地重复执行此操作，将其关闭，然后再打开。有任何想法吗？我试图在没有教程的情况下做到这一点，我想不出任何东西。

这是我的代码：

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Light Switch</title>
    <link rel="stylesheet" href="style.css">
</head>
<body style="background-color: black;">
    <img src="light-on.png" onclick="this.src='light-off.png'">
    <img src="light-off.png" onclick="this.src='light-on.png'">
</body>
</html>

标签： javascripthtmlcssimage

解决方案

可以通过您的方式创建工作代码，但效率低且不优雅。您只需要一个 img 元素并更改其来源。

<img src="light-on.png" class="image--switchable" data-light="on">

您可以在 img 标签中使用 onclick，但我认为事件监听器是一个更好的解决方案。

let alternation = {
  on: "off",
  off: "on"
}

// I assume you have multiple images. That's why I used querySelectorAll and forEach.
document.querySelectorAll(".image--switchable").forEach(img => {
   img.addEventListener("click", () => {
      let light = img.dataset.light;
      img.src = `light-${alternation[light]}.png`
      img.dataset.light = alternation[light];
   })   
})

// If you have only one image use:
// document.querySelector(".image--switchable").addEventListener...

推荐阅读