为什么只有第三行是颜色发生变化的呢？-慕课网

首页课程实战体系课手记专栏慕课教程

为什么只有第三行是颜色发生变化的呢？

来源：9-22 编程练习

慕侠4705823

2018-01-23 15:40

window.onload = function(){

var tr=document.getElementsByTagName("tr");

for(i=0;i<tr.length;i++){

tr[i].onmouseenter=function(){tr[i].style.background="#f2f2f2";}

tr[i].onmouseleave=function(){tr[i].style.background="#fff";}

}

}

写回答关注

2回答

liadrinz

2018-02-28 15:51:44

已采纳
楼上完全正确，可以用以下方案解决：
方案一：用let声明变量i，即for(i=0;i<tr.length;i++)改为for(let i=0;i<tr.length;i++)
方案二：用自执行匿名函数把闭包包装起来，
只需将for循环体里面的内容改为：
```
(function(num){
    tr[num].onmouseenter=function(){tr[num].style.background="#f2f2f2";}
    tr[num].onmouseleave=function(){tr[num].style.background="#fff";}
    })(i)
```
2 1

匹诺曹诺匹

你好，请问一下为什么题主代码完全正确，但是出不来效果呢？

2018-03-13 19:37:59

共 2 条回复 >
慕勒7123956

2018-01-25 11:23:05

因为你给每个tr都绑定了tr[i]的样式发生变化，它们的i是同一个变量。当你把鼠标以上tr时，这时候数组循环是肯定已经完成了的。这时候的i其实就是tr.length.

0 1

JavaScript进阶篇

本课程从如何插入JS代码开始，带您进入网页动态交互世界

468060 学习 · 21891 问题

相似问题

只能改变原有的行的颜色

回答 2

这样写为什么新增的颜色不会有变化呢？

回答 2

颜色变化有问题

回答 1

为什么鼠标移动颜色没变化？

回答 2

改变行颜色，这样写为什么不行？

回答 3

打开慕课网App查看更多内容