Font Awesome播放图标点击无法切换为暂停图标问题排查

核心问题分析 #

1. 选择器匹配错误：你的HTML中播放图标是<i>元素，但JS代码里一直在选择svg元素，导致无法定位到实际的图标载体，makeallplay函数和点击事件都无法作用在正确元素上。
2. 事件目标不准确：即使使用Font Awesome的SVG模式，点击图标时e.target可能指向SVG内部的<path>元素，而非承载图标的外层元素，导致类名修改失效。
3. 变量未明确定义：原代码中songplayicon变量未给出定义逻辑，若仅获取了单个.songplayicon元素，会导致后续图标无法绑定点击事件。

修正后的代码 #

JavaScript代码

// 重置所有图标为播放状态
const makeallplay = () => {
  // 选择所有播放图标（匹配HTML中的<i>元素）
  const smallplayicons = document.querySelectorAll(".songplayicon i");
  smallplayicons.forEach(element => {
    element.classList.remove('fa-circle-pause');
    element.classList.add('fa-circle-play');
  });
};

// 给每个播放图标绑定点击事件
document.querySelectorAll(".songplayicon i").forEach(element => {
  element.addEventListener('click', e => {
    e.stopPropagation(); // 避免事件冒泡影响父元素
    makeallplay();
    // 使用currentTarget确保拿到绑定事件的图标元素，而非内部子元素
    const targetIcon = e.currentTarget;
    targetIcon.classList.remove('fa-circle-play');
    targetIcon.classList.add('fa-circle-pause');
  });
});

额外检查项 #

• 确认Font Awesome资源已正确引入（无论是CSS文件还是SVG核心库），确保fa-circle-play、fa-circle-pause、fa-solid这些类能正常渲染图标。
• 若使用Font Awesome的SVG模式，可将选择器改为.songplayicon svg，但仍需用e.currentTarget来确保操作的是外层SVG元素。

内容的提问来源于stack exchange，提问作者Gurkirat Singh