如何避免重复编写JavaScript代码？网页DIV显隐场景优化需求

嘿，这个需求太常见啦！重复写相同的显隐切换逻辑确实挺繁琐的，我给你几个实用的方案，帮你高效复用代码👇

1. 封装通用的切换函数 #

把核心逻辑抽成一个可复用的函数，接受元素ID或者DOM元素作为参数，这样不管要切换哪个元素，直接调用这个函数就行：

// 通用显隐切换函数
function toggleElement(elementOrId) {
  // 处理参数：如果是字符串就按ID找元素，否则直接用传入的DOM元素
  const element = typeof elementOrId === 'string' 
    ? document.getElementById(elementOrId) 
    : elementOrId;

  if (!element) return; // 避免找不到元素时报错

  // 切换显示状态
  element.style.display = element.style.display === 'none' ? 'block' : 'none';
}

使用的时候超简单，按钮的点击事件直接传目标元素的ID：

<button onclick="toggleElement('myDIV')">Try it</button>
<div id="myDIV">点击按钮切换我的显隐</div>

<!-- 其他元素也能直接用 -->
<button onclick="toggleElement('anotherDIV')">切换另一个DIV</button>
<div id="anotherDIV">我是另一个内容块</div>

2. 用CSS类控制显隐（更灵活） #

如果你的元素可能需要不同的默认显示方式（比如flex、inline-block），用CSS类来控制会更稳妥，还能把样式和逻辑分离：

首先定义CSS类：

/* 隐藏元素的类 */
.hidden {
  display: none !important;
}

然后写一个极简的切换函数：

function toggleElementClass(elementId) {
  const element = document.getElementById(elementId);
  if (!element) return;
  // 切换hidden类的存在状态
  element.classList.toggle('hidden');
}

这种方式的好处是：元素的默认显示样式可以在CSS里定义，JS只负责切换类，后续修改显示逻辑只需要改CSS，不用动JS代码。

3. 事件委托批量处理（适合多按钮场景） #

如果页面上有很多个切换按钮，不用给每个按钮都绑定onclick，用事件委托可以一次性搞定所有按钮，完全不用重复写函数：

先给按钮加一个自定义数据属性data-target，指向要切换的元素ID：

<button data-target="myDIV">切换第一个DIV</button>
<div id="myDIV">第一个内容块</div>

<button data-target="anotherDIV">切换第二个DIV</button>
<div id="anotherDIV">第二个内容块</div>

<button data-target="thirdDIV">切换第三个DIV</button>
<div id="thirdDIV">第三个内容块</div>

然后写一段全局的事件监听代码：

// 给document绑定点击事件，利用事件冒泡处理所有按钮
document.addEventListener('click', function(e) {
  // 判断点击的元素是带data-target的按钮
  if (e.target.matches('[data-target]')) {
    const targetId = e.target.getAttribute('data-target');
    const targetElement = document.getElementById(targetId);
    
    if (targetElement) {
      // 用类切换的方式处理显隐
      targetElement.classList.toggle('hidden');
    }
  }
});

这样不管你后续加多少个切换按钮，只要给按钮加上data-target属性，就能自动生效，完全不用再写额外的JS代码！

小提示 #

如果你的元素初始状态是通过CSS隐藏的（不是inline的style="display:none"），那第一种方案里的element.style.display会是空字符串，这时候判断逻辑会失效。所以更推荐用CSS类切换或者事件委托+类切换的方式，兼容性和灵活性都更好。

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