单击按钮时更改字体真棒图标

Question

我正在使用此代码播放/暂停背景音频。

        <div class="music-box">
            <audio id="losAudio" src="images/honcayeu.mp3"></audio>
            <button id="btn_playPause">
                <i class="fa fa-music"></i>
            </button>
        </div>

    var losAudio = document.getElementById("losAudio");
    function losAudio_playPause() {
        var isPaused = losAudio.paused;
        losAudio[isPaused ? "play" : "pause"]();
    }
    document.getElementById("btn_playPause").addEventListener("click", losAudio_playPause);

但现在我想要点击按钮时，图标将更改为 fa-pause 图标。 可以告诉我一个简单的解决方案吗？谢谢

Answer 1

要在播放音频时将按钮图标从 fa-music 更改为 fa-pause，您可以修改 losAudio_playPause 函数以相应地更新按钮图标。

试试这个：

var losAudio = document.getElementById("losAudio");
var playPauseButton = document.getElementById("btn_playPause");

function losAudio_playPause() {
    var isPaused = losAudio.paused;
    losAudio[isPaused ? "play" : "pause"]();
    playPauseButton.innerHTML = '<i class="fa ' + (isPaused ? 'fa-music' : 'fa-pause') + '"></i>';
}

playPauseButton.addEventListener("click", losAudio_playPause);

它的作用是检查音频当前是暂停还是正在播放，并使用三元运算符分别将按钮图标设置为 fa-music 或 fa-pause。然后使用 innerHTML 属性用新图标更新按钮的内容。

Answer 2

你需要在你的函数中做一个动作。尝试获取元素（添加ID）并更改第i个元素的类

Answer 3

您可以使用

classList

、

add()

和

remove()

：

let pause = true;

document.getElementById("btn_playPause").addEventListener("click", () => {
  let icon = document.querySelector("i");
  if (pause) {
    icon.classList.add("fa-pause");
    icon.classList.remove("fa-music");
    pause = false;
  } else {
    icon.classList.add("fa-music");
    icon.classList.remove("fa-pause");
    pause = true;
  }
});

第二种方式是你可以使用

className

：

document.querySelector("i").className = `fa ${pause ? "fa-pause" : "fa-music"}`;

Answer 4

 // Get references to the DOM elements we need
   const losAudio = document.getElementById("losAudio");
   const playPauseButton = document.getElementById("btn_playPause");
   const playIcon = playPauseButton.querySelector("i.fa-music");
   
   // Create the pause icon element and add the appropriate CSS classes
   const pauseIcon = document.createElement("i");
   pauseIcon.classList.add("fa", "fa-pause");
   
   // Define a function to update the play/pause icon based on the current state of the audio player
   const updatePlayPauseIcon = () => {
     // If the audio is paused, remove the pause icon and restore the play icon
     if (losAudio.paused) {
       playIcon.classList.remove("fa-pause");
       playPauseButton.removeChild(pauseIcon);
     } 
     // Otherwise, add the pause icon to the button
     else {
       playIcon.classList.add("fa-pause");
       playPauseButton.appendChild(pauseIcon);
     }
   };
   
   // Define a function to toggle the audio player between play and pause
   const togglePlayPause = () => {
     // Call the play() or pause() method on the audio player depending on its current state,
     // and then update the play/pause icon
     losAudio[losAudio.paused ? "play" : "pause"]();
     updatePlayPauseIcon();
   };
   
   // Attach the togglePlayPause function to the click event of the play/pause button
   playPauseButton.addEventListener("click", togglePlayPause);

<!-- HTML markup for the music player -->
<div class="music-box">
   <audio id="losAudio" src="images/honcayeu.mp3"></audio>
   <button id="btn_playPause">
   <i class="fa fa-music"></i>
   </button>
</div>

您可以通过更改按钮内图标元素的类来更新按钮的图标。这是您的代码的更新版本，它在播放音频时将图标更改为“fa-pause”，在暂停时将图标更改为“fa-music”

updatePlayPauseIcon 函数检查音频是否暂停，并相应地通过添加或删除“fa-pause”类以及附加或删除暂停图标元素来更新按钮的图标。 losAudio_playPause 函数在播放或暂停音频后调用 updatePlayPauseIcon。