<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");
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。