今天在前端技术群中看到有位初学朋友问了个问题,我贴一下代码:
js:

var pList = document.getElementsByTagName("p");
for(var i=0;i<pList.length;i++){
        pList[i].onclick=function(){
            alert(pList[i].innerHTML);
        }
    }
}

html:

<div>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
</div>

他的想法是点击每一个P标签的时候获取到点击的p标签的html,代码看着没什么问题,可实际报错了~
这个问题估计大部分人一开始都遇到过,为什么这条语句不好使呢?
个人理解,页面初始化的时候i就已经从0走到了4,当你点击P的时候,此时i已经变成了5,而pList[5]并不存在,所以会报undefined的错误,改法有两种:
第一种把pList[i]改成this,当p标签被点击时this直接代表p进行获取html。
第二种就是:

var pList = document.getElementsByTagName("p");
for(var i=0;i<pList.length;i++){
    (function(e){
        pList[e].onclick=function(){
            alert(pList[e].innerHTML);
        }
    })(i)
}

在点击事件外加入立即执行函数,把i当做变量传递进点击事件,这样也可获取到每次点击的索引。
这个如果深刻点说,就涉及到js里至关重要的闭包环节了~
点击事件在循环内部,然而还想调用人家的变量,就像你在别人家看着人家主人在跑步,你还想用跑步机,那么你要么等人家跑完了,你用着人家“跑完”的跑步机(文中的i=5),要么你就让主人给你同时在旁边安装一个一模一样的跑步机,你们一起(立即执行函数)
粗略的写完了,嘿嘿,欢迎一起探讨问题指正错误,高手可以跳过,写出来也是为了做个笔记,温故而知新~


KissDuo
460 声望9 粉丝

FE coding~ing~