Question

我正在使用此脚本

<audio src="http://193.108.24.21:8000/fresh" id="audio"></audio>
    <i class='fas fa-play fa-5x' id="play" onclick="play(this)"></i>

    <script>
    function play(button) {
    var audio = $(button).prev()[0];
    if (audio.paused) {
        audio.play();
        $('#play').removeClass('fa-play')
        $('#play').addClass('fa-pause')
    }else{
        audio.pause();
        audio.currentTime = 0
        $('#play').addClass('fa-play')
        $('#play').removeClass('fa-pause')
    }
}
    </script>

但是当我将多个页面添加到一页时，它不起作用。

image

这就是发生的情况，每个玩家都为自己工作，但图标却没有。单击一个播放器后，只有一个图标会发生变化，如图所示

image2

如何使每个图标脱颖而出？我分别更改了每个ID，但此后再也没有发生。谢谢！

Answer 1

使用$（button）而不是$（“＃play”）来定位所单击的按钮，而不是ID，这是行不通的，因为它不是唯一的。

    <script>
    function play(button) {
    var audio = $(button).prev()[0];
    if (audio.paused) {
        audio.play();
        $(button).removeClass('fa-play')
        $(button).addClass('fa-pause')
    }else{
        audio.pause();
        audio.currentTime = 0
        $(button).addClass('fa-play')
        $(button).removeClass('fa-pause')
    }
}
    </script>

您还可以使用.toggleClass（'fa-play fa-pause'）来代替手动添加和删除类。

如何单击更改字体真棒图标

1 个答案: