点击后的图片不会回到之前的图片

Clicked image doesn't come to previous image after clicking it again

本文关键字：      更新时间：2023-09-26

Html代码:

<img src="images/assets/plus.png"  alt="Earth" id="pic" class="portrait" onclick="changeImage()" />
Javascript: 

 var newsrc = "minus.png";
 function changeImage() {
    if (newsrc == "minus.png") {
        document.images["pic"].src = "images/assets/minus.png";
        document.images["pic"].alt = "minus";
        newsrc = "minus.png";
    } else {
        document.images["pic"].src = "images/assets/plus.png";
        document.images["pic"].alt = "plus";
        newsrc = "plus.png";
    }
 }

我使用这些代码来改变图像onclick。现在我希望当我再次点击减号图像时它会再次回到正号图像，我怎么做呢?

如果minus.png则设置为minus.png ?否则永远不会被执行。如果不是负的，就是负的，否则就是正的。将==修改为!=。如果你想要的图像id为"pic"，你应该使用getElementById()。

编辑:

对于多个图像，使用以下命令并将id="pic"更改为class="pic":

function changeImage() {
    if (newsrc != "minus.png") {
     for(var i = 0; i<document.getElementsByClassName("pic").length; i++) {
        document.getElementsByClassName("pic")[i].src = "images/assets/minus.png";
        document.getElementsByClassName("pic")[i].alt = "minus";
     }
        newsrc = "minus.png";
    } else {
     for(var i = 0; i<document.getElementsByClassName("pic").length; i++) {
        document.getElementsByClassName("pic")[i].src = "images/assets/plus.png";
        document.getElementsByClassName("pic")[i].alt = "plus";
     }
        newsrc = "plus.png";
    }

您应该使用document.getElementById("pic")而不是现有的document.images[]方法，因为CC_10方法返回一个数组。在你的例子中，它返回"[object HTMLImageElement]"。

您还应该将var newsrc = "minus.png"移动到函数中。我不确定函数是否能识别出你这样写的变量。

最后，你不应该在if中设置newsrc变量。

话虽如此，这段代码要简单得多:

function changeImage() {
    var pic = document.getElementById("pic");
    var x = document.getElementById("pic").src;
    if (x == "images/assets/plus.png"){
        pic.src = "images/assets/minus.png"
        // Plus whatever else you want to do
    } else {pic.src = "images/assets/plus.png"
        // Plus whatever else you want to do
    }
}
相关文章：
  • 没有找到相关文章