如何移除jQuery代码中的if else循环及重复代码？

架构老林

2026-5-20

嘿，太懂你这种被几十行重复if else支配的痛苦了！48个分支想想都头大，咱们来一步步把这些冗余代码彻底干掉，同时解决你之前CSS类不生效的问题。

核心思路：用「数据驱动+批量处理」替代重复分支

首先咱们先把重复的逻辑抽离出来，用数据属性统一标识仪表盘，再用状态映射表替代if else判断，最后用循环批量处理所有仪表盘。

第一步：给仪表盘统一标记（解决ID依赖）

先给所有仪表盘元素加上统一的基础类（比如.dashboard）和唯一标识的data-*属性，不用再依赖ID区分：

<!-- 四个仪表盘都这么写，只需要改data-dashboard-id的值 -->
<div class="dashboard" data-dashboard-id="1"></div>
<div class="dashboard" data-dashboard-id="2"></div>
<div class="dashboard" data-dashboard-id="3"></div>
<div class="dashboard" data-dashboard-id="4"></div>

第二步：用状态映射表替代if else

把所有状态对应的样式类做成一个映射表，一次定义全局复用，彻底干掉分支判断：

// 状态→样式类的映射表，把你所有需要的状态都列在这里
const statusStyleMap = {
  active: 'dashboard-active',
  warning: 'dashboard-warning',
  error: 'dashboard-error',
  idle: 'dashboard-idle',
  // 其他状态继续加...
};

// 假设你有一个保存所有仪表盘状态的对象（从接口/本地获取都可以）
const dashboardStatuses = {
  1: 'active',
  2: 'warning',
  3: 'error',
  4: 'idle'
};

第三步：批量处理所有仪表盘

用querySelectorAll选中所有仪表盘，循环处理每个元素的样式：

// 批量更新所有仪表盘样式
document.querySelectorAll('.dashboard').forEach(dashboardEl => {
  // 获取当前仪表盘的ID
  const dashId = dashboardEl.dataset.dashboardId;
  // 获取当前仪表盘的状态
  const currentStatus = dashboardStatuses[dashId];

  // 先移除所有可能的状态类（避免多个样式叠加）
  Object.values(statusStyleMap).forEach(styleClass => {
    dashboardEl.classList.remove(styleClass);
  });

  // 应用当前状态对应的样式类
  if (statusStyleMap[currentStatus]) {
    dashboardEl.classList.add(statusStyleMap[currentStatus]);
  }
});

顺带解决：为什么之前CSS类不生效？

你说用CSS类按条件应用样式无效，大概率是优先级冲突的问题：

如果你之前用ID写了基础样式（比如#dashboard1 { background: #ccc; }），ID选择器的优先级远高于类选择器，导致你加的状态类样式被覆盖。
解决方法：提高状态类的优先级，比如用.dashboard.dashboard-active（基础类+状态类），这样优先级就会超过单独的ID选择器：

/* 基础样式用类，别用ID */
.dashboard {
  width: 200px;
  height: 200px;
  background: #ccc;
}

/* 状态样式用复合选择器，提高优先级 */
.dashboard.dashboard-active {
  background: #4CAF50;
}
.dashboard.dashboard-warning {
  background: #FFC107;
}

进阶优化：封装成可复用的控制器

如果后续还要频繁更新仪表盘状态，可以把逻辑封装成一个类，更便于维护：

class DashboardManager {
  constructor(statusStyleMap) {
    this.statusMap = statusStyleMap;
    this.dashboards = document.querySelectorAll('.dashboard');
  }

  // 更新单个仪表盘状态
  updateSingle(dashId, newStatus) {
    const dashEl = document.querySelector(`[data-dashboard-id="${dashId}"]`);
    if (!dashEl) return;

    Object.values(this.statusMap).forEach(cls => dashEl.classList.remove(cls));
    if (this.statusMap[newStatus]) {
      dashEl.classList.add(this.statusMap[newStatus]);
    }
  }

  // 批量更新所有仪表盘
  updateAll(statuses) {
    Object.entries(statuses).forEach(([id, status]) => {
      this.updateSingle(id, status);
    });
  }
}

// 使用示例
const statusMap = {
  active: 'dashboard-active',
  warning: 'dashboard-warning',
  error: 'dashboard-error',
  idle: 'dashboard-idle'
};
const dashManager = new DashboardManager(statusMap);

// 更新单个仪表盘
dashManager.updateSingle(1, 'error');
// 批量更新所有
dashManager.updateAll({
  1: 'active',
  2: 'warning',
  3: 'idle',
  4: 'error'
});

这样不管后续加多少个仪表盘，只需要在HTML里添加对应的.dashboard元素，JS逻辑完全不用改！

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