classList.toggle 切换fa-check图标失效，互换图标却正常，求解决方案

嘿，我之前也碰到过这种Font Awesome图标切换的坑！大概率是你的初始图标类和逻辑判断的顺序没对齐，或者切换时没保证元素只保留一个图标类～

先给你拆解问题根源：Font Awesome的图标类是互斥的——同一个元素不能同时存在两个图标类，否则只会显示优先级更高（或者后加载）的那个。如果你的切换逻辑是先加新类再删旧类，就会出现瞬间两个类共存的情况，导致视觉上没变化；另外如果初始类和你的判断条件不匹配，第一次点击也会触发错误的分支。

下面给你几个能让原逻辑正常运行的解决方案：

方案1：用toggleClass一键切换（最简洁） #

如果不需要额外的逻辑处理，直接同时切换两个类就行，只要初始元素只带其中一个图标类：

$('.toggle-icon').click(function() {
  $(this).toggleClass('fa-minus fa-check');
});

注意：HTML初始状态必须只包含fa-check或fa-minus其中一个，比如：

<i class="fa fa-check toggle-icon"></i>

方案2：明确判断+先删后加（适合需要额外逻辑的场景） #

如果你的切换需要绑定其他操作，就明确判断当前的图标类，先移除旧类，再添加新类，避免两个类共存：

$('.toggle-icon').click(function() {
  const $icon = $(this);
  // 先判断当前拥有的类，再执行切换
  if ($icon.hasClass('fa-check')) {
    $icon.removeClass('fa-check').addClass('fa-minus');
  } else {
    $icon.removeClass('fa-minus').addClass('fa-check');
  }
});

这里的关键是：你的HTML初始类要和第一个判断分支对应。比如初始是fa-check，那第一个分支就处理它的切换，第一次点击就会触发正确的变化。

为什么互换类名就正常？ #

你之前互换后正常，是因为原来的逻辑判断的是「是否有类A」，但初始类是类B，第一次点击进入else分支时，你可能是先加类A再删类B，导致瞬间两个类共存，Font Awesome优先显示了原来的类；而互换类名后，判断条件和初始类匹配，第一次点击就先删旧类再加新类，就不会有冲突了。

额外排查点 #

• 用浏览器开发者工具的「Elements」面板，点击前后看看元素的类有没有正确切换——如果类切换了但图标没变化，可能是Font Awesome加载问题；如果类没切换，就是JS逻辑的问题。
• 检查有没有其他JS代码修改了这些图标类，导致冲突。

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