今天在前端手艺群中看到有位初学朋侪问了个题目,我贴一下代码:
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),要么你就让主人给你同时在旁边装置一个如出一辙的跑步机,你们一同(马上实行函数)
大略的写完了,嘿嘿,迎接一同探讨题目斧正毛病,高手能够跳过,写出来也是为了做个笔记,温故而知新~