Javascript-单击时更改图像，再次单击按钮时返回同一图像

我将背景音频添加到我的网站

我只想创建一个带有图标的按钮，当访问网站的用户单击该按钮时，声音会静音

我已经有了这个脚本，它运行得非常好

但是我想更改按钮上的图像，我有两个图标，一个用于播放，它仅在播放音乐时显示图标，另一个用于静音，它仅在音乐静音时显示图标

我这里有一个脚本，但它只工作一次，换句话说，当我第二次单击时，图标不会返回到上一个图像，图标不会改变

我的英语不好，但我希望你能理解

多谢各位

剧本

function changeImage() {


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


     }

HTML

---

我猜您对if条件感到困惑。如果不是玩，你应该让它玩，反之亦然。试试这个：

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

---

比较图像src不是很可靠，这就是为什么您在这里面临一个问题。它可能包括域名，而不仅仅是路径。使用CSS类尝试更灵活的方法：

HTML

<a onclick="mute(); changeImage(this)" id="mute">
    <img src="img/play.png" id="play" />
    <img src="img/pause.png" id="pause" />
</a>

CSS

#mute #pause {
    display: none;
}
#mute.playing #pause {
    display: block;
}
#mute.playing #play {
    display: none;
}

演示：

---

关于支持的说明。如果您需要支持IE9，那么您就不能使用classList API，并且需要使用通常的

if（obj.className=='playing'）{…}

Second

“img/pause.png”

应该是

“img/play.png”

这样做的一个好方法是向img元素添加数据属性：；单击时检查类，更改为Appropate source并更改类。您也不必将其发送到函数，因为您没有使用它，也没有在函数定义中定义它。onclick=“mute（）；changeImage（）；”@user274408-它是否仍然第一次切换？如果不是，那么问题是您的测试——查看调试器并查看

src

function changeImage(obj) {
    obj.classList.toggle('playing');
}

#mute #pause {
    display: none;
}
#mute.playing #pause {
    display: block;
}
#mute.playing #play {
    display: none;
}