使用jQuery点击切换Font Awesome 5播放/暂停图标失败问题

嘿，我来帮你搞定这个播放/暂停图标切换的问题！既然你已经确认点击事件能正常触发（弹窗测试没问题），那问题大概率出在图标元素的选择逻辑或者Font Awesome 5的切换方式上，下面给你几种靠谱的解决思路和代码示例：

Font Awesome 5的图标写法有严格的前缀要求，免费版常用的是fas（实心样式）或far（空心样式），正确的按钮结构应该是这样的：

<button id="playPauseBtn">
  <i class="fas fa-play"></i>
</button>

如果前缀写错（比如用了旧版的fa而不是fas），不仅图标可能不显示，后续的类切换也会失效。

你说“无法找到内部元素”，大概率是选择器写错了。可以在点击事件里加个控制台输出，验证是否选中了目标图标元素：

const playBtn = document.getElementById('playPauseBtn');
playBtn.addEventListener('click', function() {
  const icon = this.querySelector('i');
  console.log(icon); // 看看控制台输出的是null还是正常的DOM元素
});

如果输出是null，那说明你的选择器没匹配到内部的<i>标签，得检查HTML的层级结构（比如是不是把图标放在了其他嵌套标签里）。

方法一：切换类名（推荐，符合Font Awesome最佳实践） #

Font Awesome 5的图标是通过类名控制显示的，直接切换fa-play和fa-pause这两个核心类就可以，不会破坏其他样式类：

const playPauseBtn = document.getElementById('playPauseBtn');

playPauseBtn.addEventListener('click', function() {
  const icon = this.querySelector('i');
  // 判断当前图标类型，切换对应类名
  if (icon.classList.contains('fa-play')) {
    icon.classList.remove('fa-play');
    icon.classList.add('fa-pause');
  } else {
    icon.classList.remove('fa-pause');
    icon.classList.add('fa-play');
  }
  // 这里可以添加你的播放/暂停业务逻辑
});

方法二：修改图标元素内容（适合简单场景） #

如果你的图标元素没有额外自定义样式，也直接替换整个<i>标签的内容，但要注意保留前缀类（比如fas）：

const playPauseBtn = document.getElementById('playPauseBtn');

playPauseBtn.addEventListener('click', function() {
  const icon = this.querySelector('i');
  if (icon.classList.contains('fa-play')) {
    icon.outerHTML = '<i class="fas fa-pause"></i>';
  } else {
    icon.outerHTML = '<i class="fas fa-play"></i>';
  }
});

不过这种方法不如类切换灵活，要是图标有自定义类会被覆盖，所以优先选方法一。

如果你是用的Font Awesome的SVG核心库（比如通过npm引入的@fortawesome/fontawesome-svg-core），类切换的逻辑不适用，得用官方提供的API来更新图标：

// 先确保正确引入库和图标
import { library, dom } from '@fortawesome/fontawesome-svg-core';
import { faPlay, faPause } from '@fortawesome/free-solid-svg-icons';

library.add(faPlay, faPause);

// 切换逻辑
const playPauseBtn = document.getElementById('playPauseBtn');
playPauseBtn.addEventListener('click', function() {
  const icon = this.querySelector('svg');
  if (icon.dataset.icon === 'play') {
    dom.update(icon, faPause);
  } else {
    dom.update(icon, faPlay);
  }
});

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