Question

我正在尝试制作播放/暂停按钮。这就是我现在所拥有的。这是html。

<img alt="play" src="img/play.png" id="imgClickAndChange" onclick="changeImage()" class="hidden-xs hidden-sm" style="position: relative; width: 10%; z-index: 10000; margin: 0 auto; top: 42%;"/>

这是javascript：

function changeImage() {

    if (document.getElementById("imgClickAndChange").src = "../final_copy/img/play.png") 
    {
        document.getElementById("imgClickAndChange").src = "../final_copy/img/pause.png";
    }
    else {
        if (document.getElementById("imgClickAndChange").src = "../final_copy/img/pause.png")
            {
             document.getElementById("imgClickAndChange").src = "../final_copy/img/play.png";
            }
        }
}

我知道第二个＆＃34;如果＆＃34;可能不是必需的，但两种方式都不起作用。我只能将图像从播放图像更改为暂停图像，但是当我再次单击它时它不会改变回来。

感谢您的帮助！

Answer 1

您正在比较这些src值是错误的。使用==代替=

if (document.getElementById("imgClickAndChange").src == "../final_copy/img/play.png") {
     document.getElementById("imgClickAndChange").src = "../final_copy/img/pause.png";
}
else {
 if (document.getElementById("imgClickAndChange").src == "../final_copy/img/pause.png") {
     document.getElementById("imgClickAndChange").src = "../final_copy/img/play.png";
 }
}

Answer 2

如果它是一个简单的切换功能，您只需要一次检查：

function changeImage() {
  if (document.getElementById("imgClickAndChange").src == "../final_copy/img/play.png") {
        document.getElementById("imgClickAndChange").src = "../final_copy/img/pause.png";
    }else{  
        document.getElementById("imgClickAndChange").src = "../final_copy/img/play.png";
  }
}

Answer 3

你需要var isPasued = false;切换图像src！

var isPaused=false;
var imgObj=document.querySelect("img")[0];  //edit this
imgObj.addEventListener("click",function(){
     if(!isPaused){
         imgObj.src="../final_copy/img/play.png";
         isPaused=true;
     }
     else
     {
         imgObj.src="../final_copy/img/pause.png";
         isPaused=false;
     }
});

= is ==我同意一个答案！

Answer 4

var element = "document.getElementById("imgClickAndChange").src",
    play = "../final_copy/img/play.png",
    pause = "../final_copy/img/pause.png";

if (element == play) {
    element = pause;
} else {
    if (element == pause) {
        element = play";
    }
}
}

单击图像时更改图像src和id（播放/暂停按钮）

4 个答案: