javascript - 再次点击后，点击的图片不会回到上一张图片

Question

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。现在我希望当我再次单击减号图像时它会再次返回加号图像。我该怎么做？

Answer 1

如果minus.png然后设置为minus.png ？否则永远不会执行。如果不是减号，则应为减号，否则为加号。更改 ==至 != .如果你想要id为“pic”的图片，你应该使用getElementById() .

编辑:

对于多个图像，请使用以下内容并更改 id="pic"至 class="pic"在<img> :

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";
    }