如何在点击时更改字体真棒图标

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>

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

图片

这就是发生的事情，每个玩家都为自己工作，但图标却没有。 当一个玩家被点击时，只有一个图标改变，如图

图2

如何让每个图标脱颖而出？ 我单独更改了每个人的 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') 而不是手动添加和删除类。