测试代码
<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");
}
箭头函数没有自己的this
、arguments
、super
。所以,在箭头函数里面使用this
,其实就是Window
对象。
把箭头函数换成普通函数,此时的this
就是函数本身,普通函数有箭头函数没有的东西,例如arguments
、super
。普通函数可以使用new
,即构造器:
$(".tree-ocx-li").on("click", function () {
$(this).addClass("tree-ocx-li-active");
}