本文讲解如何使用 JavaScript 通过元素的 class 名统一绑定点击事件，实现点击时自身隐藏（display: none）、下一个兄弟元素显示（display: block）的效果，并修正初学者常见的语法错误与逻辑误区。
本文讲解如何使用 javascript 通过元素的 class 名统一绑定点击事件，实现点击时自身隐藏（`display: none`）、下一个兄弟元素显示（`display: block`）的效果，并修正初学者常见的语法错误与逻辑误区。
在实际开发中，我们常希望用一种可复用的方式控制具有相同类名（如 .box）的多个元素的行为，而不是为每个元素单独写 onclick="..." 内联脚本。原始代码存在几个关键问题：
-
this.element和element.hasClass(...)是 jQuery 写法，但示例中未引入 jQuery，纯 JS 中不存在hasClass()方法（应使用element.classList.contains("box")）； -
nextElementSibling.style.display = "block"缺少对象引用（未定义nextElementSibling变量）； - 内联
onclick绑定耦合度高、难以维护，且this指向易混淆； - CSS 中
#box2默认display: none是合理的，但 JS 应确保目标元素存在，避免运行时报错。
✅ 正确做法是：用 addEventListener 统一绑定事件，通过 event.currentTarget 精准获取被点击元素，再操作其样式与相邻节点。以下是优化后的完整实现：
<!DOCTYPE html>
<html>
<head>
<style>
.box {
position: relative;
width: 150px;
height: 150px;
color: #fff;
cursor: pointer;
margin: 10px;
padding: 10px;
}
#box {
background-color: green;
}
#box2 {
display: none;
background-color: blue;
}
</style>
</head>
<body>
<div class="box" id="box">
<p>text text text text text</p>
</div>
<div class="box" id="box2">
<p>text text text text text text text text text text</p>
</div>
<script>
function toggleDisplay(event) {
const clicked = event.currentTarget;
// 隐藏当前点击元素
clicked.style.display = 'none';
// 获取并显示下一个兄弟元素（需确保存在）
const next = clicked.nextElementSibling;
if (next && next.classList.contains('box')) {
next.style.display = 'block';
}
}
// 为所有 .box 元素批量绑定事件（更通用的写法）
document.querySelectorAll('.box').forEach(box => {
box.addEventListener('click', toggleDisplay);
});
</script>
</body>
</html>? 关键改进说明：
- 使用
document.querySelectorAll('.box')批量获取所有目标元素，实现「一次编写、多处生效」，真正符合「用类名驱动行为」的设计初衷； - 添加
if (next && next.classList.contains('box'))安全检查，防止点击最后一个.box时因无兄弟元素而报错； - 移除内联 HTML 事件，提升可维护性与可测试性；
-
element.classList.contains("box")是原生 JS 判断类名的标准方法（非 jQuery 的hasClass）。
? 进阶提示：若需支持多次切换（显示 ⇄ 隐藏），可改用 getComputedStyle(clicked).display === 'none' 判断状态，或直接切换 classList 配合 CSS 类（如 .hidden { display: none; }），语义更清晰、性能更优。
掌握这种基于类名的事件委托思想，是迈向结构化、可扩展 DOM 操作的重要一步。
