javascript - 在 JavaScript 中更改图像源

Question

我是 JavaScript 新手，我试图在每次点击时从第一次到第二次以及从第二次到第一次(无限期)交替显示图像。我试过这个:

function change() {

    var imgId = document.getElementById("image");

    var ubuntu = imgId.src="ubuntu.jpg";

    var debian = imgId.src="debian.jpg"

    if(imgId.src="ubuntu.jpg") {

        return debian;

    } else if(debian) {

        return ubuntu;
  
    }

}

<img id="image" src="ubuntu.jpg" width="160" height="120" onclick = "change()">
      

另外，我想知道代码将镜像从 ubuntu 更改为 debian 而不是从 debian 更改为 ubuntu 的原因。

Answer 1

您可以在 2 个图像之间切换 src，如下所示:

function change () {
    var imgElement = document.getElementById("image");

    if (imgElement.src === 'debian.jpg') {
        imgElement.src = 'ubuntu.jpg';
    }
    else {
        imgElement.src = 'debian.jpg';
    }
}

或者，使用 ternary operator :

function change () {
    var imgElement = document.getElementById("image");
    var src = imgElement.src;

    imgElement.src = src === 'debian.jpg' ? 'ubuntu.jpg' : 'debian.jpg';
}