Js中获取元素索引遇到的问题

问题描述：点击超链接，想要获取每个超链接的索引，但是获取的都是一个固定的值

HTML代码

 <div>
      <a href="javascript:;">11</a>
      <a href="javascript:;">22</a>
      <a href="javascript:;">33</a>
      <a href="javascript:;">44</a>
      <a href="javascript:;">55</a>
 </div>

Js代码

<script>
      var allA=document.querySelectorAll("a");
      for (var i = 0; i < allA.length; i++) {
        allA[i].onclick = function () {
          console.log(i)；//每点击一次获取的都是5
        };
      }
</script>

产生的原因：此程序执行的顺序是先执行for循环，在执行单击响应函数，当执行单击响应函数时，for循环已经执行完了，此时i的值已经变为5，所以每次打印的i都为5.

---

解决方案1：添加如下代码2行代码

allA[i].num = i;
console.log(this.num);

完整js代码

 <script>
      var allA = document.querySelectorAll("a");
      for (var i = 0; i < allA.length; i++) {
          //为每一个超链接添加一个num属性（num---随便命名）
        allA[i].num = i;
        allA[i].onclick = function () {
          //   console.log(i);
          //获取超链接的索引
          console.log(this.num); //打印0,1,2,3,4
        };
      }
</script>

解决方案2利用闭包解决
将执行代码写到立即执行函数内

(function (i) {
          allA[i].onclick = function () {
            console.log(i); //每点击一次获取的都是5
          };
        })(i);

<script>
  var allA=document.querySelectorAll("a");
  for (var i = 0; i < allA.length; i++) {
    (function(i){
      allA[i].onclick = function () {
      console.log(i)//每点击一次获取的都是5
    };
    })(i)
  }
</script>

解决方案3 利用ES6 let声明变量完美解决

<script>
     let allA=document.querySelectorAll("a")
     for (let i = 0; i < allA.length; i++) {
        allA[i].onclick = function () {
          console.log(i);//每点击一次获取的都是5
        };
      }
</script>

解决方案4 ES5新增方法each()

<script>
     let allA=document.querySelectorAll("a")
     allA.forEach(function(items,index){
       items.onclick=function(){
         console.log(index)
       }
     }) 
</script>

推荐使用第三种或第四种方案，简单易操纵
这时就可以获取超链接的索引了，！！！！！