JavaScript如何在循环加事件的同时获取元素下标

JavaScript如何在循环加事件的同时获取元素下标

当我们在用JavaScript做特效时，常常需要获取到当前元素的下标来控制当前元素以及其它元素的变化，如：轮播图开发时需要获取按钮的下标来控制本按钮的样式改变以及按钮对应的图片样式改变(这种思想可以运用于许多相同的场景)
接下来通过另外一种场景来讲述这个问题
下图中有四个按钮，点击哪个按钮控制台输出当前按钮的下标(序号)

1.循环通过给i号按钮增加属性记录本按钮序号

var buttons = document.querySelectorAll("button");
for(var i=0;i<buttons.length;i++){
  buttons[i].num = i;  //将当前的i值存入i号button的num属性中
  for(var j=0;j<buttons.length;j++){
    buttons[j].onclick = function(){
    console.log(this.num);
    }
  }
}

2.for循环使用let

var buttons = document.querySelectorAll("button");
for(let i=0;i<buttons.length;i++){ 
  buttons[i].onclick = function(){
    console.log(i);
  }
}

3.使用闭包

var buttons = document.querySelectorAll("button");
for(var i=0;i<buttons.length;i++){
  (function(num){
    buttons[num].onclick = function(){
      console.log(num);
    }
  })(i);
}