Jquery选择器选中某节点,$(this) 的结果是 Window 对象,而非该节点对象

1,116 阅读1分钟

测试代码

<ul class="tree-ocx">    
    <li class="tree-ocx-li" data-displayed="false">      
        <div class="tree-ocx-tip">分类</div>      
        <ul class="tree-ocx-body">        
            <li class="sub-category-item">设计作品</li>        
            <li class="sub-category-item">技巧杂烩</li>        
            <li class="sub-category-item">生活随笔</li>      
        </ul>    
    </li>
</ul>

当我们使用Jquery选择器选中节点A之后,并为之添加点击事件on(events, hander)hander参数接收一个箭头函数,在箭头函数中又需要选中此节点A,为其添加一个CSS样式。$(this)this指向的并不是节点A,而是Window对象

$(".tree-ocx-li").on("click", () => {
    $(this).addClass("tree-ocx-li-active");
}

箭头函数没有自己的thisargumentssuper。所以,在箭头函数里面使用this,其实就是Window对象。

把箭头函数换成普通函数,此时的this就是函数本身,普通函数有箭头函数没有的东西,例如argumentssuper。普通函数可以使用new,即构造器:

$(".tree-ocx-li").on("click", function () {
    $(this).addClass("tree-ocx-li-active");
}