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

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，因为它不是唯一的，所以它不起作用。&nbsp; &nbsp; <script>&nbsp; &nbsp; function play(button) {&nbsp; &nbsp; var audio = $(button).prev()[0];&nbsp; &nbsp; if (audio.paused) {&nbsp; &nbsp; &nbsp; &nbsp; audio.play();&nbsp; &nbsp; &nbsp; &nbsp; $(button).removeClass('fa-play')&nbsp; &nbsp; &nbsp; &nbsp; $(button).addClass('fa-pause')&nbsp; &nbsp; }else{&nbsp; &nbsp; &nbsp; &nbsp; audio.pause();&nbsp; &nbsp; &nbsp; &nbsp; audio.currentTime = 0&nbsp; &nbsp; &nbsp; &nbsp; $(button).addClass('fa-play')&nbsp; &nbsp; &nbsp; &nbsp; $(button).removeClass('fa-pause')&nbsp; &nbsp; }}&nbsp; &nbsp; </script>您也可以使用 .toggleClass('fa-play fa-pause') 而不是手动添加和删除类。