点击不同元素实现多元素显隐时如何避免大量重复JavaScript代码？

核心思路 #

将重复的DOM操作逻辑抽为统一函数，所有触发显隐规则用配置表维护，后续新增元素/交互逻辑仅需修改配置，无需新增重复的处理函数。

具体实现 #

1. JavaScript改造代码 #

// 所有受控显隐元素总表
const allControlledEls = [
  'trigger1', 'trigger2', 'trigger3',
  'element1', 'element2', 'element3', 'element4', 'element5',
  'subelement1', 'subelement2', 'subelement3'
]
// 显隐规则配置：key为触发元素id，value为点击后需要显示的元素id列表，其余受控元素默认隐藏
const displayRule = {
  trigger1: ['element1', 'element2', 'element3'],
  trigger2: ['element4', 'element5'],
  trigger3: ['element1', 'element3', 'element4'],
  element1: ['subelement1', 'subelement2'],
  element2: ['subelement2', 'subelement3'],
  element3: ['subelement1', 'subelement2', 'subelement3'],
  reset: ['trigger1', 'trigger2', 'trigger3']
}
// 统一显隐处理函数
function handleDisplay(triggerId) {
  // 先隐藏所有受控元素
  allControlledEls.forEach(id => {
    document.getElementById(id).style.display = 'none'
  })
  // 显示配置指定的元素
  const showList = displayRule[triggerId] || []
  showList.forEach(id => {
    document.getElementById(id).style.display = 'block'
  })
}
// 事件委托统一绑定点击事件，减少性能损耗，后续新增元素无需重新绑定
document.querySelector('.wrapper').addEventListener('click', e => {
  const target = e.target
  if (target.id && displayRule.hasOwnProperty(target.id)) {
    handleDisplay(target.id)
  }
})

2. HTML改造代码 #

移除所有行内onClick绑定即可，其余结构不变：

<div class="container">
  <div class="wrapper">
    <div class="group">
      <div class="element" id="trigger1"></div>
      <div class="element" id="trigger2"></div>
      <div class="element" id="trigger3"></div>
    </div>
    <div class="group">
      <div class="element" id="element1"></div>
      <div class="element" id="element2"></div>
      <div class="element" id="element3"></div>
      <div class="element" id="element4"></div>
      <div class="element" id="element5"></div>
    </div>
    <div class="group">
      <div class="element" id="subelement1"></div>
      <div class="element" id="subelement2"></div>
      <div class="element" id="subelement3"></div>
    </div>
    <div class="group">
      <button id="reset">Back to start</button>
    </div>
  </div>
</div>

3. CSS代码 #

原有CSS逻辑可完全复用，无需修改：

#trigger1 { display: block; background-color: red; }
#trigger2 { display: block; background-color: blue; }
#trigger3 { display: block; background-color: yellow; }

#element1 { display: none; background-color: purple; }
#element2 { display: none; background-color: green; }
#element3 { display: none; background-color: cyan; }
#element4 { display: none; background-color: violet; }
#element5 { display: none; background-color: magenta; }

#subelement1 { display: none; background-color: orange; }
#subelement2 { display: none; background-color: lightblue; }
#subelement3 { display: none; background-color: lightgreen; }

.container { width: 100%; }
.wrapper {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}
.group {
    width: 100%;
    float: left;
    display: inline-block;
}
.element {
    height: 50px;
    width: 25%;
    float: left;
    display: inline-block;
}
button {
    height: 20px;
    width: 100px;
    background-color: black;
    color: white;
}

方案优势 #

后续新增触发元素、受控元素时，仅需要两步操作：

1. 将新的受控元素id加入allControlledEls数组
2. 在displayRule配置中新增对应触发id的显隐列表
   不需要新增任何业务处理函数，代码量不会随元素数量线性增长，维护成本极低。

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