如何在點擊時更改字體真棒圖標

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') 而不是手動添加和刪除類。