Question

我在HTML上有这个：

<script type="text/javascript" src="./scripts/changeImage.js"></script>
  <img id="myimage" onclick="changeImage()" src="./images/avatars/1.png"/>

这是功能

var cc=0;

function changeImage(){
  if(cc==-1){
      cc=0;
      document.getElementById('myimage').src="./images/avatars/1.png";
      } else if (cc==0){
      cc=1;
      document.getElementById('myimage').src="./images/avatars/2.png";
      } else if (cc==1){
      cc=2;
      document.getElementById('myimage').src="./images/avatars/3.png";
      } else if (cc==2){
      cc=0;
      document.getElementById('myimage').src="./images/avatars/4.png";
      } 
    }

我必须单击2次才能更改图像。我尝试了一些技巧，但没有。

Answer 1

我必须单击2次才能更改图像...

猜测一下，我会说cc开始是-1，所以你在代码中跟随这个分支：

cc=0;
document.getElementById('myimage').src="./images/avatars/1.png";

由于它设置了与图像上已有的相同路径，因此没有任何变化。但是cc为0，因此第二次点击会跟随下一个分支。

BTW，这是switch语句的用途：

function changeImage() {
    switch (cc) {
        case -1:
            document.getElementById('myimage').src = "./images/avatars/1.png";
            break;
        case 0:
            document.getElementById('myimage').src = "./images/avatars/2.png";
            break;
        case 1:
            document.getElementById('myimage').src = "./images/avatars/3.png";
            break;
        case 2:
            document.getElementById('myimage').src = "./images/avatars/4.png";
            break;
    }
    cc = cc == 2 ? 0 : cc + 1;
}

或地图：

var imageMap = {
    -1: "./images/avatars/1.png",
    0:  "./images/avatars/2.png",
    1:  "./images/avatars/3.png",
    2:  "./images/avatars/4.png"
};
function changeImage() {

    document.getElementById('myimage').src = imageMap[cc];
    cc = cc == 2 ? 0 : cc + 1;
}

在上述两个方面，我都复制了if/else系列的逻辑，但请注意，if/else系列的逻辑永远不会让您回到1.png。< / p>

另请注意，我假设真实的图像路径更复杂，因为否则您只想关闭1.png，2.png等事实。

JavaScript函数在第一次点击时没有响应

1 个答案: