javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
2014-12-20 11:26
846 查看
本文实例讲述了javascript使用for循环批量注册的事件不能正确获取索引值的解决方法。分享给大家供大家参考。具体分析如下:
可能不少朋友会遇到一个问题,那就是当使用for循环批量注册事件处理函数,然后最后通过事件处理函数获取当前元素的索引值的时候会失败,先看一段代码实例:
复制代码 代码如下:<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="//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="//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="//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的循环
相关文章推荐
- javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
- javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
- VC中使用CRichEdit不能响应鼠标事件解决方法
- 应用程序无法启动,因为应用程序的并行配置不正确。有关详细信息,请参阅应用程序事件日志,或使用命令行sxstrace.exe工具。解决方法
- Android 使用WebView 时获取数据出现编码不正确的解决方法
- jQuery不能使用unbind解除超链接<a>的click事件的解决方法
- C#动态代码生成控件后其他事件不能获取该控件值的解决方法
- 解决方法:vs2010+opencv不能正确使用imread()和imshow()函数
- .ocx注册失败以及IE使用<object>获取不到.ocx方法的解决办法
- 修复CentOS7升级Python到3.6版本后yum不能正确使用的解决方法
- “应用程序无法启动,因为应用程序的并行配置不正确。有关详细信息,请参阅应用程序事件日志,或使用命令行 sxstrace.exe 工具” 的解决方法
- 解决使用IE不能正确访问TestDirector的方法
- Red Hat未注册而不能使用yum问题解决方法
- 解决使用IE7不能正确访问TestDirector的方法
- Windows 2003不能使用include file功能的解决方法
- 不能使用XP的“帮助和支持”解决方法
- "在应用程序级别之外使用注册为 allowDefinition='MachineToApplication' 的节是错误的。如果在 IIS 中没有将虚拟目录配置为应用程序,则可能导致此错误"的解决方法
- hp6525s网卡不能自动获取IP地址的解决方法(新)
- Lenovo F41 使用WinXP不能全屏看Flash格式的电影的解决方法