如何通过JavaScript优化Bootstrap图标填充状态切换代码

你现有代码的核心冗余点是两个图标绑定的点击逻辑几乎完全一致，仅对应的空心/填充类名有区别，完全可以抽离成通用逻辑，借助this和配置项消除重复代码。

优化思路 #

把不同图标独有的「空心类名」「填充类名」作为配置单独存储，共用同一套切换逻辑：点击时通过this拿到当前触发事件的图标元素，读取它对应的配置类名，再做类名和颜色的切换即可。

具体实现 #

第一步：给图标元素加统一标识和配置 #

给所有需要做填充切换的图标加统一的类名toggle-icon，同时用data-*属性存它对应的空心、填充状态类名，示例HTML如下：

<!-- 心形图标 -->
<i id="heart" class="bi bi-heart toggle-icon" 
   data-empty="bi-heart" 
   data-filled="bi-heart-fill"></i>

<!-- 柱状图图标 -->
<i id="chart" class="bi bi bi-bar-chart toggle-icon" 
   data-empty="bi-bar-chart" 
   data-filled="bi-bar-chart-fill"></i>

第二步：写通用切换逻辑 #

不用再分别给每个图标单独写事件回调，统一绑定事件即可：

// 获取所有需要切换状态的图标
const icons = document.querySelectorAll('.toggle-icon');

// 通用切换函数
function handleIconToggle() {
  // this 指向当前被点击的图标元素
  const emptyCls = this.dataset.empty;
  const filledCls = this.dataset.filled;
  const isCurrentFilled = this.classList.contains(filledCls);

  if (isCurrentFilled) {
    // 从填充态切回空心态
    this.classList.replace(filledCls, emptyCls);
    this.style.color = 'white';
  } else {
    // 从空心态切到填充态
    this.classList.replace(emptyCls, filledCls);
    this.style.color = '#1DB954';
  }
}

// 给所有图标绑定点击事件
icons.forEach(icon => icon.addEventListener('click', handleIconToggle));

优化点说明 #

• 用classList.replace()直接完成两个类名的替换，不需要分开写add和remove，代码更简洁
• 后续如果要新增其他可切换的图标（比如收藏星标、点赞拇指图标），只需要在HTML里加对应元素、填对data-empty和data-filled的类名即可，不需要修改任何JS逻辑，扩展性更强
• 完全消除重复代码，所有切换逻辑只维护一份，后续改颜色、改切换逻辑只需要改一个地方

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