点击ul下的li时alert其index值（闭包的应用）

最新推荐文章于 2022-09-03 00:31:50 发布

允哥

最新推荐文章于 2022-09-03 00:31:50 发布

阅读量962

点赞数

分类专栏： Jquery 文章标签：应用闭包

本文链接：https://blog.csdn.net/qq_29572055/article/details/51671483

版权

Jquery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <style type="text/css">
       </style>
   </head>
   <body>

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

       <script type="text/javascript">
           function $(id){
               return document.getElementById(id);
           }

           // 方法1，直接给每个li添加index属性
           var list = $("test").children;
           for(var i=0; i<list.length; i++){
               list[i].setAttribute("index", i);
               list[i].onclick = function(){
                   alert(this.getAttribute("index"));
               };
           }


           // 方法2，使用闭包的方式
           var list2 = $("test").getElementsByTagName("li");
           for(var j=0;j<list2.length;j++){
               list2[j].onclick = (function(num){
                   return function(){
                       alert(num);
                   };
               })(j);
           }

       </script>

   </body>

</html>