Question

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

我只是想创建一个带图标的按钮，当访问网站的用户点击按钮时，声音就会静音。

我已经有了这个脚本，而且效果非常好。

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

我这里有一个脚本，但它只能运行一次，换句话说，当我第二次点击时，图标不会回到最后一个图像，图标不会改变。

我的英语不好，但我希望你明白。

谢谢。

脚本

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

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

Answer 1

我猜你是否因为条件而感到困惑。如果它不是播放你应该播放，反之亦然。试试这个：

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

Answer 2

比较图像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>

<强> JS

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

CSS

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

演示：http://jsfiddle.net/XurUS/

关于支持的说明。您需要支持IE9，然后您不能使用classList API，并且需要使用通常的if (obj.className == 'playing') {...}。

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

2 个答案:

演示：http://jsfiddle.net/XurUS/