首页 > 网站 > WEB开发 > 正文

JS一个非常经典的问题:在遍历数组时对DOM监听事件,索引值将始终等于遍历结束后的值

2024-04-27 14:09:54
字体:
来源:转载
供稿:网友

JS一个非常经典的问题:在遍历数组时对DOM监听事件,索引值将始终等于遍历结束后的值

一个简单的Tab选项卡点击事件。

<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里的索引值是循环结束后的最终值???一直不是很明白,求高人指点!!!


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表