jQuery重复代码优化咨询：批量处理checkba0##与link-ba0##元素

架构老林

2026-7-5

优化重复if判断的更优写法

针对你用重复if判断来控制元素隐藏的场景，完全可以利用循环+命名规则简化代码，核心思路是借助变量的命名规律（checkbaXX对应.link-baXX）批量处理，无需写重复的判断逻辑。

方案1：已知最大编号时用固定循环

如果能确定需要处理的编号范围（比如从01到12），可以直接循环遍历数字，动态生成配置键和元素选择器：

// 可根据实际需求调整最大编号
const maxItemNum = 12;

for (let i = 1; i <= maxItemNum; i++) {
  // 把数字转为两位数格式，比如1→'01'，12→'12'
  const numStr = i.toString().padStart(2, '0');
  const configKey = `checkba${numStr}`;
  const elementSelector = `.link-ba${numStr}`;
  
  // 当配置为false且元素存在时，添加hide类
  if (!data.config[configKey]) {
    const targetElement = document.querySelector(elementSelector);
    if (targetElement) {
      targetElement.classList.add('hide');
    }
  }
}

方案2：未知数量时动态遍历配置属性

如果元素数量不固定，且data.config里的属性都是checkbaXX格式，可以直接遍历配置对象的属性，通过正则匹配提取编号：

// 遍历data.config的所有属性
for (const key in data.config) {
  // 匹配以checkba开头、后面跟两位数字的属性名
  const numMatch = key.match(/^checkba(\d{2})$/);
  if (numMatch) {
    const numStr = numMatch[1];
    const elementSelector = `.link-ba${numStr}`;
    
    if (!data.config[key]) {
      const targetElement = document.querySelector(elementSelector);
      if (targetElement) {
        targetElement.classList.add('hide');
      }
    }
  }
}