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

我复制了您的代码以查看问题所在。我使用了刚刚从Google下载的2张img：img1.png和img2.jpeg

它没有用。因此，我打开了Google Chrome浏览器的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。实现方法是使用getAttribute('src')上的函数colorImage。之后，您需要使用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 2

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

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

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

这是一个可行的例子。

colorImage

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

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代码通过按钮在两个图像之间切换？

3 个答案: