如何用JavaScript为每个盒子实现带对应内容的弹窗？

常见问题根源 #

• 循环绑定点击事件时未创建独立作用域，导致所有事件回调共享同一个变量，最终都读取到最后一次循环的内容
• 获取内容时误用全局选择器（比如document.querySelector('.box')），而非当前点击元素的内部内容

解决方案示例 #

假设你的基础HTML结构如下：

<!-- 三个可点击的盒子 -->
<div class="box">TRY1</div>
<div class="box">TRY2</div>
<div class="box">TRY3</div>

<!-- 弹窗结构 -->
<div class="popup" id="popup" style="display: none;">
  <div class="popup-content" id="popup-content"></div>
  <button class="close-btn">关闭</button>
</div>

方法1：用forEach遍历绑定事件（推荐，逻辑清晰） #

const boxes = document.querySelectorAll('.box');
const popup = document.getElementById('popup');
const popupContent = document.getElementById('popup-content');
const closeBtn = document.querySelector('.close-btn');

// 给每个盒子绑定点击事件
boxes.forEach(box => {
  box.addEventListener('click', () => {
    // 读取当前点击盒子的文本内容
    const currentContent = box.textContent.trim();
    // 更新弹窗内容并显示弹窗
    popupContent.textContent = currentContent;
    popup.style.display = 'block';
  });
});

// 关闭弹窗逻辑
closeBtn.addEventListener('click', () => {
  popup.style.display = 'none';
});

方法2：事件委托（适合动态添加盒子的场景） #

如果盒子是动态生成的，用事件委托更高效：

const container = document.body; // 假设盒子都在body内，可替换为实际容器
const popup = document.getElementById('popup');
const popupContent = document.getElementById('popup-content');
const closeBtn = document.querySelector('.close-btn');

// 给父容器绑定事件，通过事件冒泡判断点击目标
container.addEventListener('click', (e) => {
  if (e.target.classList.contains('box')) {
    const currentContent = e.target.textContent.trim();
    popupContent.textContent = currentContent;
    popup.style.display = 'block';
  }
});

// 关闭弹窗逻辑同上
closeBtn.addEventListener('click', () => {
  popup.style.display = 'none';
});

普通for循环的正确写法（避免作用域问题） #

如果一定要用普通for循环，必须用let声明循环变量，确保每次循环生成独立作用域：

const boxes = document.querySelectorAll('.box');
for (let i = 0; i < boxes.length; i++) {
  boxes[i].addEventListener('click', () => {
    const currentContent = boxes[i].textContent.trim();
    popupContent.textContent = currentContent;
    popup.style.display = 'block';
  });
}

内容的提问来源于stack exchange，提问作者Moyladiva