点击按钮切换元素显示状态：如何简化重复JavaScript代码？

方案1：利用自定义数据属性（推荐，扩展性强） #

先给按钮添加data-target属性，明确关联对应DIV的ID，让按钮与目标区块的关系更直观：

<button id="category" data-target="hidecategory">分类</button>
<div id="hidecategory">分类内容区块</div>

<button id="brand" data-target="hidebrand">品牌</button>
<div id="hidebrand">品牌内容区块</div>

<button id="gender" data-target="hidegender">性别</button>
<div id="hidegender">性别内容区块</div>

用一段JS统一处理所有按钮的点击事件，完全复用切换逻辑：

// 获取所有带切换目标的按钮
const toggleButtons = document.querySelectorAll('[data-target]');

// 通用的切换函数
function toggleTargetDiv(event) {
  // 从按钮的data-target属性获取对应DIV的ID
  const targetId = event.currentTarget.dataset.target;
  const targetDiv = document.getElementById(targetId);
  
  // 切换显示状态
  targetDiv.style.display = targetDiv.style.display === 'none' ? 'block' : 'none';
}

// 批量绑定点击事件
toggleButtons.forEach(button => button.addEventListener('click', toggleTargetDiv));

方案2：用CSS类控制显示隐藏（更优雅，样式与逻辑分离） #

先定义CSS类来管理隐藏状态，后续调整样式无需修改JS：

.hidden {
  display: none;
}

修改JS逻辑，通过切换类来控制显示隐藏：

const toggleButtons = document.querySelectorAll('[data-target]');

function toggleTargetDiv(event) {
  const targetId = event.currentTarget.dataset.target;
  const targetDiv = document.getElementById(targetId);
  
  // 直接切换hidden类，比操作style更灵活
  targetDiv.classList.toggle('hidden');
}

toggleButtons.forEach(button => button.addEventListener('click', toggleTargetDiv));

方案3：基于原有ID命名规则循环（无需修改HTML） #

如果不想改动现有HTML结构，可利用按钮与DIV的ID命名规律（按钮ID为category，对应DIV为hidecategory），用循环批量绑定事件：

// 定义所有关联的名称集合
const togglePairs = ['category', 'brand', 'gender'];

togglePairs.forEach(name => {
  const btn = document.getElementById(name);
  const targetDiv = document.getElementById(`hide${name}`);
  
  btn.addEventListener('click', () => {
    // 切换显示状态，也可替换为方案2的类切换逻辑
    targetDiv.style.display = targetDiv.style.display === 'none' ? 'block' : 'none';
  });
});

以上方案均能彻底消除重复代码，新增切换项时只需添加对应HTML（方案1、2）或在数组中补充名称（方案3），无需重复编写事件逻辑。

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