播放或暂停音频时切换图标

Question

问题

我有一个点击处理程序，用于删除.fa-pause的类，然后在音频暂停时添加一个.fa-play类（反之亦然）。但是，在第二次单击播放按钮之前，它不会执行此操作。

scripts.js中

var audio = document.getElementById("painter");

$(".audio__play").click(function(){
        if (audio.paused == true) {
            $(this).removeClass("fa-pause");
            $(this).addClass("fa-play");
            audio.play();
        } else {
            $(this).removeClass("fa-play");
            $(this).addClass("fa-pause");
            audio.pause();
        }
});

Answer 1

我只是猜测这个。您可能将要使用的图标与音频播放状态混合在一起。

例如，当audio.paused === true用audio.play()播放音频时。此时您的按钮图标是否不会变为暂停图标？如果是，那么当你暂停音频时，你应该删除fa-play 和添加fa-pause ，反之亦然。

这对你有用吗？

var audio = document.getElementById("painter");

$(".audio__play").click(function(){
    if (audio.paused == true) {
        // Audio is going to play so we set the
        // pause icon on the button.
        $(this).removeClass("fa-play");
               .addClass("fa-pause");

        audio.play();
    } else {
        // Audio is going to pause so we set the
        // play icon on the button.
        $(this).removeClass("fa-pause");
               .addClass("fa-play");
        audio.pause();
    }
});

Answer 2

这是您尝试做的一个非常简单的工作版本。 http://jsfiddle.net/W4Km8/7234/

我认为您的问题是您正在按类".audio__play"选择某些内容，然后更改其上的类。这对我来说似乎有点可疑。在我的示例中，我将选择器更改为ID选择器"#audio__play"。

如果您无法正常使用，则需要在网页上发布更多代码。