2 ruirui 1996 ruirui_1996 于 2017.10.03 11:32 提问

【JavaScript】一个简单的隔行变色,鼠标移入移出的问题

为什么此处只能用this,如果把this换成oLis就是错的?

 <script type="text/javascript">
    var oLi = document.getElementsByTagName("li");
    for (var i = 0; i < oLi.length; i++) {
        var oLis = oLi[i];
        i % 2 === 0 ? (oLis.className = "c1" , oLis.old = "c1") : (oLis.className = "c2", oLis.old = "c2");
        oLis.onmouseover = function () {
            this.className = "c3"; //为什么此处只能用this,如果把this换成oLis就是错的?
        };
        oLis.onmouseout = function () {
            this.className = this.old;
        };
    }
</script>

8个回答

fengliuhuoliao
fengliuhuoliao   2017.10.03 15:49
已采纳

首先说下this。this是指向事件的调用者。
然后

  var oLi = document.getElementsByTagName("li"); 

获取到的是伪数组。所有的li元素都放入oLi变量里面了。
其次for循环语句 里面的

  var oLis = oLi[i];

是把当前循环的 i 作为变量oLi的索引值,找到oLi伪数组当前执行的li元素。for每循环一次都会创建一个oLis,也就是一共有。。。你有多少li我就有多少oLis。

 oLis.onmouseover = function () {
            this.className = "c3"; //为什么此处只能用this,如果把this换成oLis就是错的?
        };

这个语句的意思就是当鼠标移入当前li的时候当前li的样式发生改变。前面说了,this指向事件的调用者。这里鼠标移入的调用者是oLis,也就是for语句当前这个循环里面的li。for循环里面有很多oLis,这里调用的是当前循环的oLis。
如果把this换成oLis那么就不一定指的是当前循环的oLis。它可能指的是for语句执行完毕后oLis,当然会报错了。用this指向当前调用对象li元素,用oLis就不一定是当前的li了。
例如

var count = 10;
for (var i=0; i<count; i++) {
    console.log(i);
}
alert(i);    // 这里弹出10

最后弹出的结果并不是哪一个循环里面的i,而是最后的10. 不知这样讲解能不能清楚。

showbo
showbo   Ds   Rxr 2017.10.03 14:53
 这个是经典的闭包问题,执行完for oLis是最后的li对象了,不是当前遍历到的li对象,所以都是操作左后一个。this是触发事件的当前对象,所以有用。

做个闭包就可以了


 (function (oLis) {///////
            oLis.onmouseover = function () {
                oLis.className = "c3"; 
            };
            oLis.onmouseout = function () {
                oLis.className = oLis.old;
            };
        })(oLis)/////////////////

fengliuhuoliao
fengliuhuoliao   2017.10.03 15:55

推荐一本书叫《你不知道的javasript》 很不错,需要pdf看下可以私信我发链接。

fengliuhuoliao
fengliuhuoliao 回复a452746100: 鸣?
9 天之前 回复
a452746100
a452746100 鸣哥?
9 天之前 回复
qq_24041497
qq_24041497   2017.10.07 16:38

该函数是事件处理程序,当事件触发时,该函数才会执行,也就是this.className = "c3"才会执行。那么当事件触发,函数执行时,
如果语句是oLis.className="c3",那么程序会向前找到oLis指向的对象。正如我们知道,函数执行肯定发生在for循环执行之后,所以
此时的oLis指向的是最后一个li,所以不管鼠标移到哪一个li上,都是最后一个li的样式发生变化。而如果语句是this.className="c3"
的话,this指向的是触发事件的对象,也就是当前的li对象,所以对应的li的样式就会发生改变。
总之,最重要的是要理解当事件触发、函数执行时,this和oLis分别指向的哪个对象。

xuanxiaomo
xuanxiaomo   2017.10.03 13:27

this代表的是你当前选中的那个li

csdnnmmp
csdnnmmp   2017.10.03 13:53

使用伪类nth-child不是更容易吗?

hgx_suiyuesusu
hgx_suiyuesusu   2017.10.13 16:33

this表示当前li对象,而oLis是最后的li对象

u010953852
u010953852   2017.10.21 20:22

this是在回调函数使用的,oLis当前对像

Csdn user default icon
上传中...
上传图片
插入图片