Question

我有音频播放器，我按下按钮点击音乐停止播放，但我想改变它上面的图标，但我不知道如何添加我的课程，并点击删除它，谢谢。这是我的代码，我想删除 fa-pause 并添加 fa-play

＆＃13;

var player = document.getElementById("player");
var isPlaying = false;

function togglePlay() {
  if (isPlaying) {
    player.pause()
  } else {
    player.play();
  }
};
player.onplaying = function() {
  isPlaying = true;
};
player.onpause = function() {
  isPlaying = false;
};

＆＃13;

<button class="button" onclick="togglePlay()"><i class="fas fa-pause"></i></button>

＆＃13;

Answer 1

首先为您的播放/暂停按钮添加一个ID。

<button id="control-btn" class="button" onclick="togglePlay()"><i class="fas fa-pause"></i></button>

然后选择<i class="fas fa-pause"></i>项并删除/添加课程

var player = document.getElementById("player");
var isPlaying = false;

function togglePlay() {
  var item = document.querySelector("#control-btn i");
  if(isPlaying) {
    player.pause();
    item.classList.remove("fa-pause");
    item.classList.add("fa-play");
  } else {
    player.play();
    item.classList.remove("fa-play");
    item.classList.add("fa-pause");
  }
};
player.onplaying = function(){
  isPlaying = true;
};
player.onpause = function(){
  isPlaying = false;
};

Answer 2

这是一个工作示例。由于您仅使用html，因此您的代码包含所需的少量重构。我建议你使用jquery来简化代码。

https://jsfiddle.net/c5ystb4t/16/

以下代码是您的样本。

var player = document.getElementById("player");
var isPlaying = false;

function togglePlay() {
  if (isPlaying) {
    player.pause()
  } else {
    player.play();
  }
};
player.onplaying = function() {
  isPlaying = true;
};
player.onpause = function() {
  isPlaying = false;
};

<button class="button" onclick="togglePlay()"><i class="fas fa-pause"></i></button>

Answer 3

只需使用toggleClass中的classList方法：

document.getElementById( 'player' ).classList.toggleClass( 'fa-pause' )
document.getElementById( 'player' ).classList.toggleClass( 'fa-play' )

确保其中一个类已经处于活动状态，否则两个类都将立即激活或停用。

修改我在切换时检查了文档，每次调用只能执行一个类名。

＆＃13;

document.getElementById( 'test' ).addEventListener('click', function( event ){
  
  event.preventDefault();
  event.target.classList.toggle( 'a' );
  event.target.classList.toggle( 'b' );
  
})

＆＃13;

.a { color: red !important; }
.b { color: yellow !important; }

＆＃13;

<a href="#" id="test" class="a">Click me to toggle Classes</a>

＆＃13;

文档：https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

在旁注中，您可能希望删除isPlaying变量并使用plater.paused，因为它包含一个您不必跟踪的布尔值，因此为你节省一点时间。

在点击时添加类并删除类

3 个答案: