javascript - 单击图像时更改图像 src 和 id(播放/暂停按钮)

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

我知道可能不需要第二个“如果”，但两种方法都行不通。我只能让图像从播放图像变为暂停图像，但是当我再次单击它时它不会变回来。

感谢您的帮助!

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