如何简化JavaScript中大量重复的OnClick点击事件代码？

你的代码存在大量重复逻辑——都是点击按钮控制元素的display属性，下面提供两种实用的简化方案：

方案一：提取通用切换函数 #

把重复的显示/隐藏逻辑封装成一个函数，绑定事件时直接调用，减少代码冗余：

// 定义通用函数：控制元素显示/隐藏
function toggleElement(element, show) {
  element.style.display = show ? 'block' : 'none';
}

// 绑定点击事件
showCurs.onclick = () => toggleElement(curses, true);
hideCurs.onclick = () => toggleElement(curses, false);

showaddcurs.onclick = () => toggleElement(addc, true);
hideaddcurs.onclick = () => toggleElement(addc, false);

showExp.onclick = () => toggleElement(exp, true);
hidexp.onclick = () => toggleElement(exp, false);

showaddexp.onclick = () => toggleElement(adde, true);

方案二：使用事件委托（更易维护） #

通过给按钮添加自定义属性，用一个事件处理函数统一处理所有按钮的点击逻辑，新增按钮时无需额外编写绑定代码：

第一步：给按钮添加自定义属性 #

修改HTML按钮，加上data-target（指定要控制的元素ID）和data-action（指定显示/隐藏）：

<button id="showCurs" data-target="curses" data-action="show">显示curses</button>
<button id="hideCurs" data-target="curses" data-action="hide">隐藏curses</button>
<button id="showaddcurs" data-target="addc" data-action="show">显示addc</button>
<button id="hideaddcurs" data-target="addc" data-action="hide">隐藏addc</button>
<button id="showExp" data-target="exp" data-action="show">显示exp</button>
<button id="hidexp" data-target="exp" data-action="hide">隐藏exp</button>
<button id="showaddexp" data-target="adde" data-action="show">显示adde</button>

第二步：用事件委托处理点击 #

给所有按钮的父容器绑定一个点击事件（假设父容器ID为buttonContainer）：

document.getElementById('buttonContainer').addEventListener('click', function(e) {
  const btn = e.target;
  const targetId = btn.dataset.target;
  const action = btn.dataset.action;

  // 不是目标按钮则跳过
  if (!targetId || !action) return;

  const targetElement = document.getElementById(targetId);
  if (!targetElement) return;

  targetElement.style.display = action === 'show' ? 'block' : 'none';
});

两种方案对比：

• 方案一改动小，适合快速优化现有代码；
• 方案二扩展性更强，后续新增显示/隐藏按钮时，只需添加对应属性即可，无需修改JS代码。

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