0

I have this on HTML:

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

This is the function

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

I must click 2 times to change the image. I tried some tricks but nothing.

4

1 回答 1

1

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

猜测一下，我会说这cc开始是-1，所以你通过你的代码遵循这个分支：

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

由于这设置了图像上已经存在的相同路径，因此没有任何变化。但是然后cc是0，所以第二次点击跟随下一个分支。

顺便说一句，这就是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.

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

于 2013-08-17T18:01:24.310 回答