javascript - 鼠标移上去没有成功添加"yellow"的className，为什么？-PHP中文网问答

讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

javascript - 鼠标移上去没有成功添加"yellow"的className，为什么？

ringa_lee 2017-04-11 11:54:50

[JavaScript讨论组]

515








    

        场记第1个banner主标题
        场记第2个banner主标题
        场记第3个banner主标题
        场记第4个banner主标题
        场记第5个banner主标题
        场记第6个banner主标题

ringa_lee

全部回复(4)

高洛峰2017-04-11 11:56:50 4楼

olis[i].onmouseover=function(){
    olis[i].className="yellow";
}

这个方法、内部的olis[i].className="yellow";改成this.className="yellow";

因为i在for循环完成之后已经变为最大值了、用户点击的时候i为循环的最大值、所以这个地方方法可以用this调用

赞 +0

添加回复

PHP中文网2017-04-11 11:56:50 3楼

var 改为 let

for(let i=0;i<olis.length;i++){
  olis[i].className = i%2==0?"green":"skyblue";
    olis[i].onmouseover=function(){
    olis[i].className="yellow";
  }
}

赞 +0

添加回复

ringa_lee2017-04-11 11:56:50 2楼

事件代理？

var ul = document.getElementsByTagName("ul");
var olis = ul[0].children;
ul[0].onmouseover = function(e){
    // console.log(e);
    e.target.className = "yellow";
}

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

    i%2==0?olis[i].className="green":olis[i].className="skyblue";

}

赞 +0

添加回复

伊谢尔伦2017-04-11 11:56:50 1楼

这么说吧，这个问题在于两个点，一点是程序运行时变量的生命周期，一个是变量的作用域。

olis[i].onmouseover=function(){
   olis[i].className="yellow";
}

首先，两个 i 的运行时间不同。
第一个是网页程序在初始化的时候就运行的了，所以是 for循环每一步的对应值。
第二个i是你点击的时候才触发运行的，此时页面已经初始化完成，即上面的 for 循环已经结束，此时的 i 是for循环结束后的值；这时候对于元素数组 olis来说， i 已经越界。

其次就是JavaScript变量作用域的问题。

可以自己猜猜这段代码的结果是什么？


const COUNT = 8
var b = []

for (var i = 0; i < COUNT; i++) {
    b[i] = {
        addEventListener: function (callback) {
            this.click = callback
        },
        click: function () {}
    }
}

for (var i = 0; i < COUNT; i++) {
    var j = i
    b[j].addEventListener(function() {
        console.log(j)
    })
}

for (var k = 0; k < COUNT; k++) {
    b[k].click()
}

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>