关于常见的一个问题,涉及到闭包、作用域等问题,节点列表点击打印对应索引的问题

一、块级作用域下,最简洁的写法

    var list = document.getElementById("list"),
        childs = list.getElementsByTagName("li");
    for(let i = 0; i<childs.length; i++){
        childs[i].onclick=function(){
            console.log(i)
        }
    }

二、通过闭包,隔离各个i的作用域

    var list = document.getElementById("list"),
        childs = list.getElementsByTagName("li");
    for(var i = 0; i<childs.length; i++){
        (function(i){
            childs[i].onclick=function(){
                console.log(i)
            }
        })(i)
    }

三、通过给节点设置index属性,然后在获取该属性(设置中间属性搭桥)

    var list = document.getElementById("list"),
        childs = list.getElementsByTagName("li");
    for(var i = 0; i<childs.length; i++){
        childs[i].setAttribute("index",i);
        childs[i].onclick=function(){
            console.log(this.getAttribute("index"))
        }
    }    

 

posted @ 2019-06-24 14:24  Hello_nico  阅读(162)  评论(0编辑  收藏  举报