如何使用jQuery点击事件切换FontAwesome的fa-plus与fa-minus图标

没问题！我来帮你搞定FontAwesome图标点击切换的需求～下面给你几种常用的实现方案，你可以根据自己的项目环境来选：

方案一：原生JavaScript（通用所有项目） #

这是最基础的实现方式，不需要依赖任何框架：

HTML结构 #

<!-- 用按钮包裹图标，也可以用其他可点击元素比如span -->
<button id="toggleIconBtn">
  <i class="fa fa-plus" aria-hidden="true"></i>
</button>

如果你的FontAwesome是v5+版本，记得加上样式前缀（比如fa-solid）：

<button id="toggleIconBtn">
  <i class="fa-solid fa-plus" aria-hidden="true"></i>
</button>

JavaScript代码 #

// 获取按钮和图标元素
const toggleBtn = document.getElementById('toggleIconBtn');
const iconElement = toggleBtn.querySelector('i');

// 监听点击事件
toggleBtn.addEventListener('click', () => {
  // 用classList.toggle自动切换类名
  iconElement.classList.toggle('fa-plus');
  iconElement.classList.toggle('fa-minus');
});

原理很简单：classList.toggle()方法会自动判断类是否存在，存在就移除，不存在就添加，点击一次就完成两个图标的切换。

方案二：jQuery（适合用jQuery的项目） #

如果你的项目已经引入了jQuery，代码会更简洁：

// 监听按钮点击事件，直接切换图标类名
$('#toggleIconBtn').click(function() {
  $(this).find('i').toggleClass('fa-plus fa-minus');
});

jQuery的toggleClass()支持同时传入多个类名，一次操作就能完成切换。

方案三：Vue.js（Vue项目专属） #

如果是Vue项目，用响应式数据来控制会更符合框架习惯：

<template>
  <button @click="toggleIcon">
    <i 
      :class="['fa-solid', isMinusIcon ? 'fa-minus' : 'fa-plus']" 
      aria-hidden="true"
    ></i>
  </button>
</template>

<script>
export default {
  data() {
    return {
      isMinusIcon: false // 初始显示加号图标
    }
  },
  methods: {
    toggleIcon() {
      this.isMinusIcon = !this.isMinusIcon;
    }
  }
}
</script>

点击按钮时切换isMinusIcon的布尔值，通过条件渲染自动切换图标类名。

小提醒 #

记得确保你的项目已经正确引入了FontAwesome的资源文件（CSS或JS），不然图标可能无法正常显示哦～

内容的提问来源于stack exchange，提问作者Timilehin Osaze Adegbulugbe