Vanilla JS中为galleryItem类元素绑定onclick事件并获取索引问题

这是个前端新手常踩的经典坑——闭包作用域导致的循环变量共享问题！我先给你拆解下原因，再给你几种实用的解决方案：

问题根源 #

你用var声明的变量i是函数作用域，整个循环过程中i是同一个变量。当你给每个图片绑定点击事件时，事件函数并没有立即执行，而是等你点击图片时才触发。这时候循环早就跑完了，i的值已经变成了members.length，所以不管点哪张图，打印的都是最后一个索引。

另外你代码里还有个小拼写错误：memebers应该是members，这个也要注意修正哦。

解决方案 #

方案1：用let代替var（最简洁） #

let是ES6新增的块级作用域变量，每次循环都会创建一个独立的i变量，每个点击事件捕获的都是当前循环的那个i值：

const members = document.getElementsByClassName('galleryItem');
for(let i = 0; i < members.length; i++) {
  members[i].onclick = function() {
    console.log(i);
    // 调用你的轮播切换函数，比如 carouselSwitch(i)
  }
}

方案2：用闭包保存索引（兼容旧环境） #

如果需要兼容不支持ES6的旧浏览器，可以用立即执行函数表达式(IIFE)创建闭包，把每次循环的i值封装起来：

var members = document.getElementsByClassName('galleryItem');
for(var i = 0; i < members.length; i++) {
  // 用IIFE把当前循环的i转成局部变量index
  (function(index) {
    members[index].onclick = function() {
      console.log(index);
      // carouselSwitch(index)
    }
  })(i);
}

方案3：用forEach遍历（更易读） #

getElementsByClassName返回的是HTMLCollection，先转成数组后用forEach遍历，回调函数的第二个参数就是当前元素的索引，天然避免作用域问题：

// 把HTMLCollection转成数组
const members = Array.from(document.getElementsByClassName('galleryItem'));
members.forEach(function(item, index) {
  item.onclick = function() {
    console.log(index);
    // carouselSwitch(index)
  }
});

方案4：从元素本身获取索引（不依赖循环变量） #

还可以在点击事件触发时，通过当前元素在集合中的位置来获取索引，不用提前保存循环变量：

const members = document.getElementsByClassName('galleryItem');
for(var i = 0; i < members.length; i++) {
  members[i].onclick = function() {
    // 把集合转成数组后用indexOf找当前元素的索引
    const index = Array.from(members).indexOf(this);
    console.log(index);
    // carouselSwitch(index)
  }
}

推荐选择 #

如果你的项目不需要兼容非常老旧的浏览器，优先选方案1或者方案3，代码更简洁、可读性更高。

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