jQuery中使用箭头函数,调用$(this)失效?
1.问题
在jQuery中使用箭头函数,最后调用$(this)发现无效?
$(function () {
// 鼠标经过
$('.nav>li').mouseover(()=>{
// $(this) jQuery 当前元素 this不要加引号
// show() 显示元素 hide() 隐藏元素
$(this).children('ul').show();
});
// 鼠标离开
$('.nav>li').mouseout( ()=> {
$(this).children('ul').hide();
});
});
2.解决
$('img').click(() =>{
console.log($(this))
})
$('img').click(function(){
console.log($(this))
})
普通函数得到的是点击img的那个元素,而箭头函数是返回的是window对象
因为箭头函数在创建时就已经绑定了this, 后面在执行时不能重新绑定。
在JQuery中通常不要用箭头函数,因为JQuery在执行回调函数时很多时候会为它动态绑定一个this, 所以你不要在创建时为它绑定this, 也不要用箭头函数。
() => {};
// 相当于:
funciotn(){}.bind(this);
分类:
web开发 / 前端学习
标签:
前端学习
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了