在改变背景色中，关于this的一点问题
Huajie
2016-03-07 16:05
window.onload = function(){
// 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
var tr=document.getElementsByTagName('tr');
var len=tr.length;
for(var i=0;i<len;i++) {
tr[i].onmouseover=function(){this.style.backgroundColor="#999";}
tr[i].onmouseout=function(){this.style.backgroundColor="#fff";}
}
}
为什么把上面代码的this改成tr[i]就无效了呢？也就是：
for(var i=0;i<len;i++) {
tr[i].onmouseover=function(){tr[i].style.backgroundColor="#999";}
tr[i].onmouseout=function(){tr[i].style.backgroundColor="#fff";}
}
3回答
-
- Huajie
- 2016-03-08 14:01:16
mark一下，虽然还是不太懂
http://www.cnblogs.com/syf/archive/2012/10/04/2711828.html
-
- Huajie
- 2016-03-07 17:35:42
@王大涛
for(var i=0;i<tr.length;i++){
tr[i].index = i; //这里的index可以自己随便换,也就是给标签tr自定义的属性. 比如:tr[i].a = i;
tr[i].onmouseover=function(){tr[tr.index].style.backgroundColor="#999"}
tr[i].onmouseout=function(){tr[tr.index].style.backgroundColor="#fff";}
}
你这段的实现效果是不正确的。运行的效果实际上tr[tr.index]==tr[2]
而我原来的tr[i]位于function中，实际效果是tr[i]==tr[3] //如果审查元素手动添加一行<tr>就能发现。
据我朋友的解释，这是带参数的function在for语句中的问题。只是我不太理解其中的道理。
-
- 王大涛
- 2016-03-07 16:45:16
这个问题不是 this的问题,而是变量作用域的问题;
tr[i].onmouseover=function(){tr[i].style.backgroundColor="#999";}这行代码中黑体的ti[i]是无效的.
因为在function(){tr[i].style.backgroundColor="#999";}这个函数中i的值是不知道的.所以不能用tr[i].style.backgroundColor="#999";这样来设置样式.
一般我们会直接用this代表当前tr.如果不用this,我们可以用给标签添加属性的方法比如:
for(var i=0;i<tr.length;i++){
tr[i].index = i; //这里的index可以自己随便换,也就是给标签tr自定义的属性. 比如:tr[i].a = i;
tr[i].onmouseover = function(){ tr[tr.index].style.backgroundColor = "#999"}
tr[i].onmouseout=function()tr[tr.index].style.backgroundColor="#fff";}
}
JavaScript进阶篇
467403 学习 · 21877 问题
相似问题