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

问题描述 投票：0回答：4

我有一个包含图像的 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>
javascript html button toggle addeventlistener
4个回答
2
投票

我复制了你的代码看看问题出在哪里。我使用了 2 个刚刚从 google 下载的 imgs：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);
0
投票

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

在我的示例中，我为此使用数据属性 

data-color
。

然后在 onClick 处理程序中，我获取 

data-color
值并在 0 和 1 之间切换。然后 1 和 0 与数组图像中的索引相对应。添加到 
src
的 
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);
<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>

0
投票
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);
0
投票

您还可以在创建html和css文件后使用以下代码在两张图片之间切换并添加两个按钮：

const image = document.getElementById("image");
const btn1 = document.getElementById("btn1");
const btn2 = document.getElementById("btn2");

btn1.addEventListener("click", () => {
    image.src = "image1.jpg";
});

btn2.addEventListener("click", () => {
    image.src = "image2.jpg";
});
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.