如何使用 JavaScript 通过类名获取相同按钮的 value 值-js教程-PHP中文网

如何使用 JavaScript 通过类名获取相同按钮的 value 值

本文详解如何正确为多个具有相同类名的按钮绑定点击事件，并精准获取其 value 属性值，避免 ID 重复、DOM 未就绪及事件监听失效等常见问题。

本文详解如何正确为多个具有相同类名的按钮绑定点击事件，并精准获取其 `value` 属性值，避免 id 重复、dom 未就绪及事件监听失效等常见问题。

在实际开发中，常需为一组外观一致（如共享 btn btn-outline-secondary 类）但功能不同的按钮统一绑定事件，并动态读取各自 value 值。直接使用 getElementsByClassName() 配合循环绑定事件看似合理，却易因 DOM 加载时机、ID 冗余或选择器语法等问题导致失效。

✅ 正确做法：事件委托 + 语义化类名

首先，避免使用重复 ID（如两个 id="lbd-btn"），这违反 HTML 规范且会导致 getElementById() 行为不可预测。应改用唯一标识类（如 .lbd-btn）作为事件目标筛选依据。

其次，确保 DOM 就绪后再执行脚本。推荐使用 DOMContentLoaded 事件包裹初始化逻辑，防止元素尚未渲染即尝试绑定。

最关键的是采用事件委托（Event Delegation）：不在每个按钮上单独绑定监听器，而是将事件监听器绑定到它们的最近公共父容器，再通过 event.target.closest(selector) 精准捕获触发源——既提升性能，又天然支持后续动态插入的同类按钮。

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

以下是完整、健壮的实现方案：

<div id="buttonContainer">
  <button value="1" class="lbd-btn btn btn-outline-secondary">Discover</button>
  <button value="2" class="lbd-btn btn btn-outline-secondary">Discover</button>
</div>

window.addEventListener("DOMContentLoaded", () => {
  const container = document.getElementById("buttonContainer");
  container.addEventListener('click', (event) => {
    // 使用 closest() 安全匹配目标按钮（即使点击子元素如内联文本也有效）
    const button = event.target.closest(".lbd-btn");
    if (!button) return; // 非目标元素，忽略

    console.log("lbd button clicked");
    console.log("Value:", button.value); // 直接访问 value 属性，比 getAttribute 更简洁可靠
  });
});