javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
本文实例讲述了javascript使用for循环批量注册的事件不能正确获取索引值的解决方法。分享给大家供大家参考。具体分析如下:
可能不少朋友会遇到一个问题,那就是当使用for循环批量注册事件处理函数,然后最后通过事件处理函数获取当前元素的索引值的时候会失败,先看一段代码实例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
li{
width:240px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-size:12px;
height:30px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oLis=document.getElementsByTagName("li");
var oshow=document.getElementById("show");
for(var index=0;index<oLis.length;index++){
oLis[index].onclick=function(){
oshow.innerHTML=index;
}
}
}
</script>
</head>
<body>
<div id="show"></div>
<ul>
<li>只有努力奋斗才会有美好的明天。</li>
<li>分享互助是进步最大的源动力。</li>
<li>每一天都是新的,要好好珍惜。</li>
<li>没有人一开始就是高手,只有努力才有成长的可能</li>
<li>只有当下的时间是可贵的,下一秒都是虚幻的</li>
</ul>
</body>
</html>
在上面的代码中,当点击li元素的时候弹出值始终是四,我们本来的想法是,点击li元素在div中显示当前li元素的索引值,下面就简单分析一下其中的原因。原因非常的简单,当for循环执行完毕以后,index的值已经变为四,于是也就出现了上面的现象。
代码修改如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
li{
width:240px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-size:12px;
height:30px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oLis=document.getElementsByTagName("li");
var oshow=document.getElementById("show");
for(var index=0;index<oLis.length;index++){
oLis[index]._index=index;
oLis[index].onclick=function(){
oshow.innerHTML=this._index;
}
}
}
</script>
</head>
<body>
<div id="show"></div>
<ul>
<li>只有努力奋斗才会有美好的明天。</li>
<li>分享互助是进步最大的源动力。</li>
<li>每一天都是新的,要好好珍惜。</li>
<li>没有人一开始就是高手,只有努力才有成长的可能</li>
<li>只有当下的时间是可贵的,下一秒都是虚幻的</li>
</ul>
</body>
</html>
上面的代码实现了我们的要求,当然也可以使用闭包的方式,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
li{
width:240px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-size:12px;
height:30px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oLis=document.getElementsByTagName("li");
var oshow=document.getElementById("show");
for(var index=0;index<oLis.length;index++){
(function(index){
oLis[index].onclick=function(){
oshow.innerHTML=index;
}
})(index)
}
}
</script>
</head>
<body>
<div id="show"></div>
<ul>
<li>只有努力奋斗才会有美好的明天。</li>
<li>分享互助是进步最大的源动力。</li>
<li>每一天都是新的,要好好珍惜。</li>
<li>没有人一开始就是高手,只有努力才有成长的可能</li>
<li>只有当下的时间是可贵的,下一秒都是虚幻的</li>
</ul>
</body>
</html>
希望本文所述对大家基于javascript的web程序设计有所帮助。
- javascript下for循环用法小结
- javascript之循环停顿上下滚动
- javascript中利用数组实现的循环队列代码
- javascript 循环读取JSON数据的代码
- javascript forEach通用循环遍历方法
- javascript 循环语句 while、do-while、for-in、for用法区别
- Javascript中的for in循环和hasOwnProperty结合使用
- JavaScript的递归之递归与循环示例介绍
- JavaScript中for..in循环陷阱介绍
- javascript中的循环语句for语句深入理解
- javascript闭包传参和事件的循环绑定示例探讨
- JavaScript中对循环语句的优化技巧深入探讨
- javascript实现图片循环渐显播放的方法
- 简单学习JavaScript中的for语句循环结构
- JavaScript中利用各种循环进行遍历的方式总结
- 跟我学习javascript的for循环和for...in循环
- 跟我学习javascript的循环
相关文章
CascadeView级联组件实现思路详解(分离思想和单链表)
本文介绍自己最近做省市级联的类似的级联功能的实现思路,为了尽可能地做到职责分离跟表现与行为分离,这个功能拆分成了2个组件并用到了单链表来实现关键的级联逻辑,下一段有演示效果的gif图2016-04-04详解如何在Javascript中使用Object.freeze()
这篇文章主要介绍了详解如何在Javascript中使用Object.freeze(),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2020-10-10详谈ES6中的迭代器(Iterator)和生成器(Generator)
下面小编就为大家带来一篇详谈ES6中的迭代器(Iterator)和生成器(Generator)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-07-07JavaScript设置弹出式独立窗口页面和window的方法举例详解
window.open是网页中经常遇到的弹出窗口代码,不是网络中比较反感的那类弹出代码,下面这篇文章主要给大家介绍了关于JavaScript设置弹出式独立窗口页面和window的方法,需要的朋友可以参考下2024-01-01
最新评论