如何使用 Javascript 代码通过按钮在两个图像之间切换？

Question

我有一个包含图像的 HTML 文档，我想单击一个按钮在彩色版本和黑白版本之间切换。我的 javascript 代码如下。我意识到这个问题已经之前回答过，但答案不清楚。问题：IF 条件是否有效？如果没有，我可以使用什么？可以将 image.src 与我计算机上输入的地址进行比较吗？请注意，单击时没有任何变化。彩色图像保留。

let colorImage = document.getElementById("colorImage");
let button2 = document.getElementById("button2");

function changeToBW() {

    if (colorImage.src == "Rondout.jpg") {    // I tried three === but that 
                                              // didn't work either.
        colorImage.src = "Rondout(B&W).jpg";
}
    else {
        colorImage.src = "Rondout.jpg";
}
}
 button2.addEventListener("click", changeToBW);

我的 HTML 代码的一部分在下面的正文中：

<img id = "colorImage" class = "image" src = "Rondout.jpg">
    <button id = "button2" type = "button">Change to B&W</button>

Answer 1

您可以使用 data attribute 来跟踪显示的图像。

在我的示例中，我为此使用了数据属性 data-color。

然后在 onClick 处理程序中，我得到 data-color 值并在 0 和 1 之间切换。然后 1 和 0 对应于数组图像中的索引。它被添加到 colorImage 的 src。

这是一个工作示例。

let colorImage = document.getElementById("colorImage");
let button2 = document.getElementById("button2");

function changeToBW() {
  var images = [
    "https://images.pexels.com/photos/57905/pexels-photo-57905.jpeg",
    "https://images.pexels.com/photos/56866/garden-rose-red-pink-56866.jpeg"
  ];
  var imageNum = parseInt(colorImage.dataset.color);
  var nextImg = imageNum === 0 ? 1 : 0;
  colorImage.src = images[nextImg];
  colorImage.dataset.color = nextImg;
}
button2.addEventListener("click", changeToBW);

<img id="colorImage" data-color="0" class="image" src="https://images.pexels.com/photos/57905/pexels-photo-57905.jpeg" width="200">
<div><button id="button2" type="button">Change to B&W</button></div>

Answer 2

我复制了你的代码看看问题出在哪里。我使用了刚刚从 google 下载的 2 个 img：img1.png 和 img2.jpeg

没用。于是我打开了GoogleChrome.

的DevTab

所以我的代码：

let colorImage = document.getElementById("colorImage");
let button2 = document.getElementById("button2");

function changeToBW() {

    if (colorImage.src == "img1.png") { // colorImage.src = file:///D:/Kokal/Code/JsTests/img1.png

        colorImage.src = "img2.jpeg";
    }
    else {
        colorImage.src = "img1.png";
    }
}

button2.addEventListener("click", changeToBW);

问题是 colorImage.src 持有文件的绝对路径。所以你永远不会在 if 结束，你会在 else.

您还想更改属性 src 而不是属性。所以你也需要阅读 attr。方法是在 colorImage 上使用函数 getAttribute('src')。之后，您需要使用 setAttribute('src', [new value])

设置该属性

如果有什么不清楚，请检查下面的代码。

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
</head>
<body>
    <img id = "colorImage" class = "image" src = "./img1.png">
    <button id = "button2" type = "button">Change to B&W</button>
    <script src="app.js" type="text/javascript"></script>
</body>
</html>

JS:

let colorImage = document.getElementById("colorImage");
let button2 = document.getElementById("button2");

function changeToBW() {

    if (colorImage.getAttribute('src') === "./img1.png") {
        colorImage.setAttribute('src', "./img2.jpg");
    }
    else {
        colorImage.setAttribute('src', "./img1.png");
    }
}

button2.addEventListener("click", changeToBW);

Answer 3

let colorImage = document.getElementById("colorImage");

let button2 = document.getElementById("button2");

let imgFlag = 1;

function changeToBW() {

    if (imgFlag) {
        colorImage.setAttribute('src', "./img2.jpg");
        ImgFlag = 0;
    }
    else {
        colorImage.setAttribute('src', "./img1.png");
        ImgFlag = 1;
    }
}

button2.addEventListener("toggle", changeToBW);

如何使用 Javascript 代码通过按钮在两个图像之间切换？

How to toggle between two images with a button using Javascript code?

html

javascript

button

toggle

addeventlistener