标签：JQuery 函数 箭头 tree li ocx 选择器 节点

<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");
}

标签：JQuery,函数,箭头,tree,li,ocx,选择器,节点
来源： https://www.cnblogs.com/shiramashiro/p/16294032.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。