再次单击后，单击的图像不会显示在上一个图像上

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.Now我想要当我再次点击减号图像时它会再次返回加号图像。我该怎么做？

Answer 1

如果minus.png然后设置为minus.png？其他人从来没有表现过。应该是否减去，然后减去，否则加。将==更改为!=。如果你想要带有id＆＃34; pic＆＃34;的图片，你应该使用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";
    }

Answer 2

您应该使用document.getElementById("pic")代替您拥有的内容，因为document.images[]方法会返回一个数组。在您的情况下，它返回＆＃34; [object HTMLImageElement]＆＃34;。

您还应该在功能中移动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
    }
}