Question

我是JavaScript的新手，我正试图在每次点击时从第1个到第2个以及从第2个到第1个（无限期）交替显示图像。我试过这个：

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

您可以在两个图片之间切换function change () { var imgElement = document.getElementById("image"); if (imgElement.src === 'debian.jpg') { imgElement.src = 'ubuntu.jpg'; } else { imgElement.src = 'debian.jpg'; } }，如下所示：

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

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

或者，使用ternary operator：

ffprobe

Answer 2

您可以在图像之间进行交换的一种方式是：

image = document.getElementById('image');

var toggle = 1;
function change() {
  if (toggle == 1) {
    image.src = "debian.jpg";
    toggle = 2;
  }
  if (toggle == 2) {
    image.src = "ubuntu.jpg";
    toggle = 1;
  }
}

然后将图像设置为像你一样进行onclick：

<img id="image" src="ubuntu.jpg" onclick="change()">

在JavaScript中更改图像源

2 个答案: