                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript进阶篇

不懂为什么要用this

在for循环中，为什么要把i值赋给oLis[i].index,然后通过this来修改className，直接用oLis[i].className="on";oDivs[i].className="";为什么不对？？

yanyt

2014-12-30

源自：JavaScript进阶篇 10-1

关注问题我要回答

1701

操作

收起

2 回答

康振宁
2014-12-30

oLis[i].onclick = function()看到这句话没，这句话的意思是给oLis中的所有元素增加点击事件，而在事件中this就代表的这个元素

另外oLis是li元素的集合，所以在遍历的时候需要取单个元素

0 回复有任何疑惑可以回复我~

收起回答

yanyt 提问者

非常感谢！

2015-01-04 回复有任何疑惑可以回复我~

Lybon
2015-03-20

因为页面一旦加载完成就触发onload事件,而onclick事件触发之前,for(var i= 0,len = oLis.length;i<len;i++)这个循环已经运行完成了!oLis[i].onclick = function()这段代码只是挂在那里(挂这个词不怎么准确,意思放在那里,等待onclick事件触发),这时候的i=3.在 oLis[i].onclick = function()之前document.writeln(i)你会发现输出012,说明循环已经完成.
oLis[i].index = i 的作用只是在循环的过程中绑定下标i(0 1 2)到oLis数组相应元素oLis[0] oLis[1] oLis[2]的index变量上(例如oLis[0].index = 0;oLis[1].index =1;oLis[2].index=2)

当onclick事件触发的时候,this.className中的this就是当前鼠标所在的元素(例如家居), 同时oDivs[this.index]会获取到家居所对应的oLis数组中的index值(这里是1,因为我们已经在完成的循环中将oLis[1]=1 了),而如果换成oLis[i]则因为i===3(恒等于3),所以oLis[i]===oLis[3],当然会出错了!建议好好看一下JS的闭包原理和事件机制!

4 回复有任何疑惑可以回复我~

收起回答