本文讲解如何通过原生 javascript 实现“点击不同按钮，精准触发其内部对应的弹窗”，解决因 `queryselector` 全局匹配导致所有点击都显示同一内容的问题。核心在于利用事件目标（event target）定位当前点击元素，并在其作用域内查找子级弹窗。
在你的原始代码中，document.querySelector(".popup") 总是返回 DOM 中第一个匹配的 .popup 元素，因此无论点击哪个 .button，都只会显示第一个弹窗内容。要实现“点击即显示自身内部弹窗”的效果，关键在于将操作范围限定在被点击元素内部。
✅ 正确做法：事件委托 + 局部查询
推荐使用 addEventListener 替代内联 onclick，并结合 event.target 或直接绑定到 .button 元素上，通过 el.querySelector('.popup') 在当前按钮内部查找弹窗：
<div class="button" id="1">fgdjgdfjgfk <div class="popup">你点击了第一个按钮</div> </div> <div class="button" id="2">abc <div class="popup">你点击了第二个按钮</div> </div>
// 为每个 .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 内包裹一层透明背景层并监听其点击事件。
通过以上方式，每个按钮都能精准控制自己的弹窗，真正实现“所点即所得”，也为后续扩展（如动态加载内容、动画过渡）打下良好基础。
