使用JavaScript实现点击Font Awesome图标切换效果失效求助

问题排查与解决方案 #

核心错误点 #

• 选择器语法错误：你写的$('.fa fa-bars')是匹配类名为fa的元素下的<fa-bars>标签，完全找不到目标图标。正确的多类选择器需要把多个类名用.连接，也可以直接使用你给图标定义的专属类ham来选择，更精准无冲突。
• toggleClass使用错误：fa是Font Awesome图标必须的基础类，你将它放入切换列表会导致点击后fa类被移除，图标直接失效。仅需要切换fa-bars和fa-times两个图标类即可。

修正代码 #

将你页面中（以及外部java.js文件中）的对应JS逻辑替换为以下内容即可实现效果：

$(document).ready(function(){
  $('.ham').click(function(){
    $(this).toggleClass('fa-bars fa-times');
  });
});

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