JS一个非常经典的问题:在遍历数组时对DOM监听事件,索引值将始终等于遍历结束后的值
2015-05-05 16:38
633 查看
一个简单的Tab选项卡点击事件。
然后我们需要一点js来实现,鼠标点击时content内容的切换。
我们希望借助于数组和循环来完成这个任务,但是我们发现上述代码不能完成我们的任务,会报错:“tabContent[i] is undefined”. 我们利用alert(i)检测一下。
当我们点击tabMenu1,2,3时,不是弹出0,1,2而是弹出3,3,3。所以后面的tabContent[i]会是undefined。(tabContent[i]中i实际上只有0,1,2)解决这个问题,我们可以使用闭包。
或者我们给DOM节点添加_index属性,属性值等于索引:
虽然解决了问题。但是为什么在onclick里的索引值是循环结束后的最终值???一直不是很明白,求高人指点!!!
<style type="text/css"> ul{padding:0;margin:0;} .tab{width:400px;} .tab-menuWrapper{padding-left:20px;} .tab-menuWrapper li{float:left;display:inline;padding:5px;border:1px solid #333;border-bottom:none;margin-right:5px;} .tab-contentWrapper{border:1px solid #333;clear:left;padding:5px;} </style> <div class="tab"> <ul class="tab-menuwrapper"> <li>menu1</li> <li>menu2</li> <li>menu3</li> </ul> <div class="tab-contentwrapper"> <div>content1</div> <div style="display:none">content2</div> <div style="display:none">content3</div> </div> </div>
然后我们需要一点js来实现,鼠标点击时content内容的切换。
<script type="text/javascript"> var tabMenu=document.getElementById("tab-menuWrapper").getElementsByTagName("li"); var tabContent=document.getElementById("tab-contentWrapper").getElementsByTagName("div"); for(var i=0;i<tabmenu .length;i++){ tabMenu[i].onclick=function(){ for(var j=0;j<tabContent.length;j++){ tabContent[j].style.display="none"; } tabContent[i].style.display="block"; } } </script>
我们希望借助于数组和循环来完成这个任务,但是我们发现上述代码不能完成我们的任务,会报错:“tabContent[i] is undefined”. 我们利用alert(i)检测一下。
for(var i=0;i<tabmenu .length;i++){ tabMenu[i].onclick=function(){ alert(i); //3,3,3 why??? for(var j=0;j<tabContent.length;j++){ tabContent[j].style.display="none"; } tabContent[i].style.display="block"; } }
当我们点击tabMenu1,2,3时,不是弹出0,1,2而是弹出3,3,3。所以后面的tabContent[i]会是undefined。(tabContent[i]中i实际上只有0,1,2)解决这个问题,我们可以使用闭包。
for(var i=0;i</tabmenu><tabmenu .length;i++){ (function(_i){ tabMenu[_i].onclick=function(){ for(var j=0;j<tabContent.length;j++){ tabContent[j].style.display="none"; } tabContent[_i].style.display="block"; } })(i); }
或者我们给DOM节点添加_index属性,属性值等于索引:
for(var i=0;i</tabmenu><tabmenu .length;i++){ tabMenu[i]._index=i; tabMenu[i].onclick=function(){ for(var j=0;j<tabContent.length;j++){ tabContent[j].style.display="none"; } tabContent[this._index].style.display="block"; } }
虽然解决了问题。但是为什么在onclick里的索引值是循环结束后的最终值???一直不是很明白,求高人指点!!!
相关文章推荐
- JS一个非常经典的问题:在遍历数组时对DOM监听事件,索引值将始终等于遍历结束后的值
- js可以利用dom非常轻松的就可以遍历一个表格。当然只要是dom中有的所有对象都可以通过js来访问和处理。
- JS之 DOM事件监听的兼容性问题 IE 和 FF
- js的大数运算 跟经典的收藏 结合前一篇的收藏 解决工作中的一个大数进制转换问题
- Flex中利用Array类中的every()事件循环遍历一个数组的例子(ActionScript 3.0)
- 解决js添加一个按钮,让这个按钮也获得初始的事件,绑定到新生成的DOM
- 求一个数组的最长递增子序列(动态规划经典问题)
- js 下拉框添加监听事件和js中删除一个对象
- 将一个数组中2数之和等于某值的元素删除(JS)
- JS把数组中相同元素组合成一个新的数组问题
- JS把数组中相同元素组合成一个新的数组问题
- 【经典问题】找一个数组中的主元素
- noet2 系统Android4.1.1版本中js touchmove事件只执行一个的问题
- JS中关于call()方法的一个问题(转自百度知道,解答非常详细清楚)
- js如何监听滚动条滚动事件,使得某个标签内容始终位于同一位置
- js监听滚动条滚动事件使得某个标签内容始终位于同一位置
- (js有关图片加载问题)dom加载完和onload事件
- js DOM事件监听与解除的兼容性写法
- 关于浏览器兼容的问题以及字符串编码的一个坑,鼠标滚动事件mousewheel和DOMMouseScroll
- js轮子—一个通用版事件监听