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

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>但是当我将几个添加到一页时它不起作用。这就是发生的事情，每个玩家都为自己工作，但图标却没有。当一个玩家被点击时，只有一个图标改变，如图如何让每个图标脱颖而出？我单独更改了每个人的 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') 而不是手动添加和删除类。