本文讲解如何通过 javascript 精确控制多个同名类弹窗的显示逻辑，避免 `queryselector` 误选首个匹配项，实现“点击哪个按钮，就显示其内部对应的弹窗内容”。

在实际开发中，我们常遇到一组结构相似的交互元素（如多个 .button），每个都内嵌一个同名类 .popup 的弹窗。若直接使用 document.querySelector('.popup')，它只会返回 DOM 中第一个匹配的弹窗，导致所有点击都触发同一个内容——这正是你遇到的问题根源。

正确的思路是：事件委托 + 局部作用域查询。即监听每个按钮的点击事件，并在事件处理函数中，仅在其自身子树内查找对应的 .popup 元素。这样就能确保“所点即所得”。

以下是推荐的现代写法（无需内联 onclick，语义更清晰、维护性更强）：

java-api-doc-generator

分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

下载

<div class="button" id="1">fgdjgdfjgfk
  <div class="popup">you clicked the first button</div>
</div>
<div class="button" id="2">abc
  <div class="popup">you clicked the second button</div>
</div>

// 使用事件监听器替代内联 onclick
document.querySelectorAll('.button').forEach(button => {
  button.addEventListener('click', function() {
    // 在当前被点击的 button 元素内部查找 .popup
    const popup = this.querySelector('.popup');
    if (popup) {
      popup.style.width = '100%';
    }
  });
});

✅ 关键点说明：

• this 指向当前被点击的 .button 元素，this.querySelector('.popup') 保证只查找其子元素中的弹窗；
• 移除了冗余的 onclick="openPopup()"，避免 HTML 与 JS 耦合，提升可读性与可测试性；
• 添加了 if (popup) 安全检查，防止因结构异常导致脚本报错。

⚠️ 注意事项：

• 弹窗默认 width: 0 是为了隐藏，但建议补充 transition: width 0.3s ease 实现平滑展开效果；
• 若需支持关闭功能，可在弹窗内添加关闭按钮，并绑定 popup.style.width = '0'；
• ID 值建议避免纯数字（如 "1"），改用语义化命名（如 "btn-contact"），以符合 HTML 规范并避免潜在兼容性问题。

通过这种基于事件源定位子元素的方式，你不仅能精准控制弹窗显示，也为后续扩展（如添加动画、数据绑定、异步加载内容等）打下坚实基础。