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.解决

参考:箭头函数调用jquery中的$(this)问题

$('img').click(() =>{
   console.log($(this))
})
$('img').click(function(){
   console.log($(this))
})


普通函数得到的是点击img的那个元素,而箭头函数是返回的是window对象

因为箭头函数在创建时就已经绑定了this, 后面在执行时不能重新绑定。
在JQuery中通常不要用箭头函数,因为JQuery在执行回调函数时很多时候会为它动态绑定一个this, 所以你不要在创建时为它绑定this, 也不要用箭头函数。

() => {};
// 相当于:
funciotn(){}.bind(this);
posted @ 2024-03-09 15:59  DawnTraveler  阅读(68)  评论(0)    收藏  举报