如何使用jQuery切换Font Awesome加号与减号图标（表格行展开场景）

嘿，我瞅了下你的代码，发现问题出在jQuery选择器上啦！你写的$(this).find('i')是在尝试查找当前点击元素的子<i>标签，但实际上你点击的那个<i>本身就是图标元素，根本没有子元素，所以这个选择器找不到目标，自然没法切换图标类。

下面给你修正后的完整实现方案：

1. 完整代码示例 #

<!-- 引入依赖 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

<!-- 图标元素 -->
<i class="fas fa-plus icon" data-toggle="collapse" data-target=".row1"></i>

<!-- CSS样式 -->
<style>
.icon { 
    color: green; 
    cursor: pointer; 
    margin-right: 6px; 
}
</style>

<!-- jQuery交互逻辑 -->
<script>
$('.icon').click(function() {
    // 直接操作当前点击的图标元素，切换fa-plus和fa-minus类（fas类保持不变）
    $(this).toggleClass('fa-plus fa-minus');
});
</script>

2. 关键修正点说明 #

• 选择器调整：把$('i').click()改成$('.icon').click()更精准，避免页面上其他<i>元素被误触发；
• 类切换逻辑：因为fas是Font Awesome的基础实心图标类，不需要切换，只需要在fa-plus和fa-minus之间切换即可，所以用toggleClass('fa-plus fa-minus')就能完美实现点击切换图标的效果；
• 保留原有功能：你原来的data-toggle和data-target属性是Bootstrap折叠组件的配置，只要你引入了Bootstrap的JS和CSS，行展开/折叠的功能依然可以正常工作，这个图标切换逻辑不会影响它。

这样修改后，点击绿色加号图标就会变成减号，再次点击又变回加号，完全符合你的需求啦！

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