如何简化控制元素显隐的重复JavaScript代码以消除冗余

架构老林

2026-10-1

JavaScript代码优化方案

核心优化思路

你的代码逻辑本质是根据`designVal`和`colorVal`的取值，仅展示匹配规则的唯一一个元素，其余全部隐藏，完全可以通过映射关系+批量操作替代冗长的`if-else`判断。

具体实现步骤

第一步：补充统一类名（推荐）

给所有designXX颜色格式的DOM元素添加同一个自定义类，比如design-sku-item，方便后续批量操作：

<div class="design-sku-item" id="design01yellow"></div>
<div class="design-sku-item" id="design01black"></div>
<!-- 其余元素同理都加该类 -->

第二步：定义映射关系

把数值和实际的设计编号、颜色名做一一对应：

// 索引对应designVal的取值，值为设计编号后缀
const designIndexMap = ['01', '02', '03']
// 索引对应colorVal的取值，值为颜色名
const colorIndexMap = ['yellow', 'black', 'blue', 'grey']

第三步：替换所有if-else逻辑

原来的上百行判断逻辑可以直接替换为下面3行代码：

// 1. 隐藏所有同类元素
document.querySelectorAll('.design-sku-item').forEach(item => item.style.display = 'none')
// 2. 匹配当前要显示的元素ID
const activeItemId = `design${designIndexMap[designVal]}${colorIndexMap[colorVal]}`
// 3. 显示目标元素
document.getElementById(activeItemId)?.style.display = 'block'

可选方案（不方便修改HTML加类名的情况）

如果你暂时没法改HTML补充类名，也可以直接遍历映射关系隐藏所有元素：

const designIndexMap = ['01', '02', '03']
const colorIndexMap = ['yellow', 'black', 'blue', 'grey']

// 遍历所有组合隐藏元素
designIndexMap.forEach(design => {
  colorIndexMap.forEach(color => {
    document.getElementById(`design${design}${color}`).style.display = 'none'
  })
})
// 显示目标元素
document.getElementById(`design${designIndexMap[designVal]}${colorIndexMap[colorVal]}`)?.style.display = 'block'