将JavaScript对象数据传入Bootstrap Modal时的重复数据问题求助

这是JavaScript循环里非常经典的闭包延迟绑定坑，我帮你拆解原因和解决办法：

问题根源 #

你大概率是用了var来声明循环变量（比如for(var i = 0; ...)），或者在循环里直接绑定点击事件时，事件函数引用的是同一个循环变量。因为var是函数级作用域，循环结束后这个变量会指向最后一个对象；而点击事件是异步触发的，触发时才会去读取变量的值，自然就全是最后一个对象的数据了。

几种靠谱的解决思路 #

1. 用ES6 let替换var（最简单的方案）

let是块级作用域，每次循环都会创建一个新的变量绑定，每个点击事件函数会捕获当前循环迭代的变量值，而不是共享同一个变量：

// 假设你的对象数组是dataList
for (let i = 0; i < dataList.length; i++) {
  const item = dataList[i];
  // 创建div和按钮
  const div = document.createElement('div');
  const btn = document.createElement('button');
  btn.textContent = '查看详情';
  btn.addEventListener('click', () => {
    // 这里的item是当前迭代的对象，不是最后一个
    showModal(item); // 你的模态框渲染函数
  });
  div.appendChild(btn);
  document.body.appendChild(div);
}

2. 用闭包创建独立作用域（兼容旧浏览器）

如果需要支持ES6之前的环境，可以用立即执行函数（IIFE）把每个循环的对象封装到独立作用域里：

for (var i = 0; i < dataList.length; i++) {
  const item = dataList[i];
  // 用IIFE创建独立作用域，把当前item传进去
  (function(currentItem) {
    const div = document.createElement('div');
    const btn = document.createElement('button');
    btn.textContent = '查看详情';
    btn.addEventListener('click', () => {
      showModal(currentItem);
    });
    div.appendChild(btn);
    document.body.appendChild(div);
  })(item);
}

3. 用forEach遍历数组（更优雅的写法）

forEach的回调函数本身就是独立作用域，每个迭代都会创建新的函数上下文，不会有共享变量的问题：

dataList.forEach(item => {
  const div = document.createElement('div');
  const btn = document.createElement('button');
  btn.textContent = '查看详情';
  btn.addEventListener('click', () => {
    showModal(item);
  });
  div.appendChild(btn);
  document.body.appendChild(div);
});

4. 给按钮绑定data-*属性（不依赖作用域的方案）

把对象数据转成JSON字符串存在按钮的自定义属性里，点击时再解析出来，这种方式不需要依赖作用域绑定，适合数据量不大的场景：

for (var i = 0; i < dataList.length; i++) {
  const item = dataList[i];
  const div = document.createElement('div');
  const btn = document.createElement('button');
  btn.textContent = '查看详情';
  // 把对象转成JSON存在data属性里
  btn.dataset.item = JSON.stringify(item);
  btn.addEventListener('click', function() {
    // 点击时解析data属性里的JSON
    const currentItem = JSON.parse(this.dataset.item);
    showModal(currentItem);
  });
  div.appendChild(btn);
  document.body.appendChild(div);
}

总结 #

优先推荐用let或者forEach的方案，代码更简洁易懂，符合现代JS的写法；如果需要兼容老浏览器，再考虑闭包或者data属性的方式。

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