下面这个ul，如何点击每一列的时候alert其index

原创于 2022-09-03 00:31:50 发布 · 462 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

JavaScript 同时被 2 个专栏收录

108 篇文章

订阅专栏

WEB

63 篇文章

订阅专栏

这篇博客探讨了两种在JavaScript中使用闭包为<ul>列表项添加点击事件，弹出对应索引的方法。方法一直接将索引赋值给li元素，但无法在点击时正确显示；方法二利用立即执行函数表达式(IIFE)创建闭包，确保每次循环都有独立的作用域，从而正确弹出点击元素的索引。

下面这个ul，如何点击每一列的时候alert其index

考察闭包

<ul id="test">
     <li>这是第一条</li>
     <li>这是第二条</li>
     <li>这是第三条</li>
 </ul>

  // 方法一：
  var lis=document.getElementById('test').getElementsByTagName('li');
  for(var i=0;i<3;i++)
  {
      lis[i].index=i;
      lis[i].onclick=function(){
          alert(this.index);
  }

 //方法二：
 var lis=document.getElementById('test').getElementsByTagName('li');
 for(var i=0;i<3;i++)
 {
     lis[i].index=i;
     lis[i].onclick=(function(a){
         return function() {
             alert(a);
         }
     })(i);
 }