如何通过 JavaScript 获取具有相同类名的按钮的 value 值-html教程-PHP中文网

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

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

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

在实际开发中，我们常需为多个外观一致的按钮（如“Discover”操作）绑定统一逻辑，同时区分各自携带的数据（如 value="1" 或 value="2"）。但直接使用 getElementsByClassName() 配合循环绑定事件容易踩坑：一是 HTML 中重复使用相同 id（如两个 id="lbd-btn"）违反规范，导致 DOM 查询不可靠；二是若脚本执行时按钮尚未渲染（如放在

中），elements 将为空数组，事件根本无法绑定；三是 this.getAttribute("value") 写法冗余，而 button.value 更简洁可靠。

推荐采用事件委托（Event Delegation）方案：将事件监听器绑定到按钮的共同父容器上，利用 event.target.closest(selector) 精准捕获真正被点击的目标按钮。这种方式不仅代码更健壮，还天然支持动态添加的按钮。

✅ 正确实现步骤如下：

OpenJDK 24

OpenJDK 24 Windows x64 官方参考实现（24+36），适合 Windows 环境进行 Java 开发、编译、运行和版本兼容性验证。

下载

确保 HTML 结构合理：移除重复 id，为按钮添加唯一语义化类（如 .lbd-btn），并包裹在有明确标识的容器内（如
）；
等待 DOM 就绪：使用 DOMContentLoaded 事件确保脚本运行时元素已存在；
绑定委托事件：监听容器的 click，用 closest(".lbd-btn") 判断点击目标是否为有效按钮；
安全读取 value：直接访问 tgt.value（对

<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) => {
    const tgt = event.target.closest(".lbd-btn");
    if (!tgt) return; // 忽略非按钮区域点击（如按钮内文字、图标等子元素）

    console.log("lbd button clicked");
    console.log("Value:", tgt.value); // 直接输出 "1" 或 "2"
  });
});

? 注意事项与最佳实践：

不要依赖 id 区分同类按钮——id 必须全局唯一，应改用 data-* 属性（如 data-id="1"）或 value 本身承载业务数据；
若按钮可能动态插入（如通过 AJAX 加载），事件委托是唯一可靠方案；而循环绑定需每次新增后重新执行 addEventListener；
closest() 方法兼容现代浏览器（IE11+），如需兼容更旧环境，可改用 event.target.classList.contains("lbd-btn") 并向上遍历父节点；
CSS 类 .lbd-btn 可单独定义样式（如圆角、字号），与功能逻辑解耦，提升可维护性。

此方案简洁、高效且符合 Web 标准，是处理多按钮统一交互的推荐模式。