as=box.getElementsByTagName('a')；
for(var i=0; i<as.length; i++) {
as[i].onmouseover = function() {
this.style.background = '#D0D6D9';
}
as[i].onmouseout = function() {
this.style.background = '#FFF';
}
as[i].onclick = function() {
title.innerHTML = this.innerHTML;
}
}
上段代码中，使用this.style可以而使用as[i].style为什么不可以？？？
2016-04-17
你绑定事件是i只是个引用，循环结束后i的值就变了，你可以试试每次输出的i都死i.length.在js中for是无作用域的。执行dom节点操作时取得便是for最后的i++的值.这是JavaScript一个经典问题:在遍历数组时对DOM监听事件,索引值始终等于遍历结束后的值.
解决方法:
方法一:利用必包
for(var i=0;i<as.length;i++){
(function (_i){
as[_i].onmouseover = function() {
this.style.background = '#D0D6D9';
}
as[_i].onmouseout = function() {
this.style.background = '#FFF';
}
as[_i].onclick = function() {
title.innerHTML = this.innerHTML;
}
})(i);
}
方法二:给DOM节点添加_index属性,属性值等于索引
for(var i=0;i<as.length;i++){
as[i]._index=i;
as[i].onclick=function(){
as[i].onmouseover = function() {
this.style.background = '#D0D6D9';
}
as[i].onmouseout = function() {
this.style.background = '#FFF';
}
as[i].onclick = function() {
title.innerHTML = this.innerHTML;
}
}
}
举报
