如何根据点击的 div ID 动态显示对应弹窗内容

本文讲解如何通过原生 javascript 实现“点击不同按钮，精准触发其内部对应的弹窗”，解决因 `queryselector` 全局匹配导致所有点击都显示同一内容的问题。核心在于利用事件目标（Event target）定位当前点击元素，并在其作用域内查找子级弹窗。

在你的原始代码中，document.querySelector(“.popup”) 总是返回 dom 中第一个匹配的 .popup 元素，因此无论点击哪个 .button，都只会显示第一个弹窗内容。要实现“点击即显示自身内部弹窗”的效果，关键在于将操作范围限定在被点击元素内部。

✅ 正确做法：事件委托 + 局部查询

推荐使用 addEventListener 替代内联 onclick，并结合 event.target 或直接绑定到 .button 元素上，通过 el.querySelector(‘.popup’) 在当前按钮内部查找弹窗：

fgdjgdfjgfk   
你点击了第一个按钮
 
 
abc   
你点击了第二个按钮
 

// 为每个 .button 绑定点击事件 document.querySelectorAll('.button').forEach(button => {   button.addEventListener('click', function() {     // 在当前 button 内部查找 .popup 并展开     const popup = this.querySelector('.popup');     if (popup) {       popup.style.width = '100%';     }   }); });

⚠️ 补充注意事项

• 避免内联 js：onclick=”openPopup()” 不利于维护，且难以传递上下文；现代写法应统一用 addEventListener。
• ID 命名规范：html ID 不应以纯数字开头（如 id=”1″），建议改用语义化命名，例如 id=”btn-contact” 或 id=”popup-1″，确保兼容性和可读性。
• 关闭功能建议：实际项目中需支持点击遮罩层或按 Esc 键关闭弹窗。可添加如下逻辑：

  document.addEventListener('keydown', e => {   if (e.key === 'Escape') {     document.querySelectorAll('.popup').forEach(p => p.style.width = '0');   } });

• css 优化提示：.popup 使用 position: fixed 时，确保其父容器不影响定位；若需点击遮罩关闭，可在 .popup 内包裹一层透明背景层并监听其点击事件。

通过以上方式，每个按钮都能精准控制自己的弹窗，真正实现“所点即所得”，也为后续扩展（如动态加载内容、动画过渡）打下良好基础。