×

闭包的应用:点击列表li时打印其index值

作者:andy0012020.01.15来源:Web前端之家浏览:9800评论:0
关键词:闭包js

闭包的应用很常规,作为一名前端,必须熟练掌握。那么来学个实例:点击列表li时打印其index值。应该怎么玩呢?这里介绍几种方法,如下:

第二种方法:

<!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"));
                };
            }            
            
        </script>

    </body>
</html>

第二种方法:

<!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);
            }
            
            
            // 方法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>

您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/bibao834092830948920348.html

网友评论文明上网理性发言 已有0人参与

发表评论: