一、问题发现
这是我在完成利用li标签实现选项卡切换时候遇到的问题，起初以为是js中的闭包函数的原因，后来才有所了解。
-<body>
<ul>
<li>锄禾日当午</li>
<li>汗滴禾下土</li>
<li>谁知盘中餐</li>
<li>粒粒皆辛苦</li></ul>
<script type="text/javascript">
var li=document.getElementsByTagName('li')
for(var i=0;i<li.length;i++)
{
li[i].onclick=function(){
alert(li[i].innerHTML)
}
}
</script>
</body>
- 代码本意是想当鼠标点击诗句对应的弹出带有诗句内容的警告框，乍一看代码没有任何问题，但在代码实现后怎么点也弹不出警告框。
二、原因分析
js事件处理器在线程空闲时间不会运行,页面初始化的时候i就已经从0走到了3，当你在点击的时候i已经变成了4显然li [4]的值是不存在，所以弹不出警告框。
三、解决办法
办法一：将for中的var i用let i替代
-<script type="text/javascript">
var li=document.getElementsByTagName('li')
for(let i=0;i<li.length;i++)
{
li[i].onclick=function(){
alert(li[i].innerHTML)
}
}
</script>
办法二：为每一个要点击的对象创建index属性用来保存索引变量i
-<script type="text/javascript">
var li=document.getElementsByTagName('li')
for(var i=0;i<li.length;i++)
{ li[i].index=i;
li[i].onclick=function(){
alert(li[this.index].innerHTML)
}
}
</script>
办法三：直接使用this
-<script type="text/javascript">
var li=document.getElementsByTagName('li')
for(var i=0;i<li.length;i++)
{
li[i].onclick=function(){
alert(this.innerHTML)
}
}
</script>
