点击按钮添加FontAwesome circle-o-notch旋转图标问题求助

嘿，我来帮你搞定这个点击按钮显示旋转加载圈的问题～看了你的代码后，发现几个小问题导致效果没生效，咱们一步步来修正：

问题排查点 #

• FontAwesome版本类名不匹配：你用的是FontAwesome 5，但代码里写的fa-circle-o-notch是FontAwesome 4的类名，在v5里这个图标对应的类是fa-circle-notch（去掉了中间的-o-）。
• 缺少基础图标类：FontAwesome 5需要指定图标风格类（比如fas代表实心风格），如果按钮里的<i>元素原本没有这类基础类，直接加旋转相关的类是不会显示图标的。
• 重复添加类的隐患：多次点击按钮会重复给<i>元素添加类，可能导致样式冲突，最好先清空原有类再添加新的。

修正后的完整代码 #

HTML（确保按钮内有<i>标签） #

<button class="button">
  <i></i> 点击触发加载
</button>

JavaScript #

$('.button').on('click', function() {
  // 先清空<i>元素的所有类，再添加正确的FontAwesome类
  $(this).find('i').removeClass().addClass('fas fa-circle-notch fa-spin');
});

关键改动说明 #

1. 替换图标类名：把fa-circle-o-notch改成fa-circle-notch，适配FontAwesome 5的命名规范。
2. 添加风格类fas：这是FontAwesome 5的必填项，用来指定图标的样式家族（fas对应实心风格，也是这个加载圈唯一支持的风格）。
3. 先移除原有类：避免多次点击后类堆积，保证每次点击都是干净的状态，防止样式异常。

额外优化建议 #

如果想模拟真实的加载场景，还可以加一些细节优化：

• 加载完成后停止旋转：

// 模拟3秒加载完成，停止旋转
setTimeout(() => {
  $('.button i').removeClass('fa-spin');
}, 3000);

• 禁用按钮防止重复点击：

$('.button').on('click', function() {
  const $button = $(this);
  // 如果按钮已禁用，直接返回
  if ($button.is(':disabled')) return;

  $button.prop('disabled', true);
  $button.find('i').removeClass().addClass('fas fa-circle-notch fa-spin');

  // 模拟加载完成，恢复按钮状态
  setTimeout(() => {
    $button.prop('disabled', false);
    $button.find('i').removeClass('fa-spin');
  }, 3000);
});

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