JQuery 选择器选中某节点,在后续的链式操作函数内使用 $(this) 的结果是 Window 对象,而非该节点对象

<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>

当我们使用 JQ 选择器选中 class 名为 .tree-ocx-li 的 li 标签之后,JQ 事件函数on(events, hander)的第二个参数使用的是箭头函数,此时在箭头函数里面又需要 JQ 选中 .tree-ocx-li 节点,并为之添加一个 css 样式,this所指向的并不是该节点本身,而是最顶级的Window对象。

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

这实际涉及的是箭头函数 this 的指向问题箭头函数 - JavaScript | MDN。箭头函数没有自己的 this、arguments、super。所以,箭头函数this指向的就是 Window 对象。

综上所述,对于标题所述问题的解决方法就是把箭头函数换成普通函数

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

相关文章

页面搜索关键词突出 // 页面搜索关键词突出 $(function () {...
jQuery实时显示日期、时间 html: &lt;span id=&quot...
jQuery 添加水印 &lt;script src=&quot;../../../.....
中文:Sys.WebForms.PageRequestManagerParserErrorExceptio...
1. 用Response.Write方法 代码如下: Response.Write(&q...
Jquery实现按钮点击遮罩加载,处理完后恢复 思路: 1.点击按...