帮忙看一段 js 代码

2016-07-18 15:41:42 +08:00
 older
function oneMenu() {
var main = document.getElementById("oneMenu");
var links = main.getElementsByClassName("cc-tree-item");
for (var i = 0; i < links.length; i++) {
links[i].onclick = function () {
addClass(this, "cc-selected cc-focused")
}
}
}

想在点击一个元素时,删除其他同级元素的 "cc-selected cc-focused" class 。现在点击能追加样式,可不能删除
3140 次点击
所在节点    JavaScript
13 条回复
xjp
2016-07-18 15:46:46 +08:00
```
links[i]. onclick = function () {
addClass(this, "cc-selected cc-focused")
};
```

这里的 this 指向的是全局 而不是你希望的 links[i],这里弄个闭包吧
narcotics
2016-07-18 15:51:48 +08:00
循环中创建闭包是最常见的 JavaScript 大坑之一,参见

https://developer.mozilla.org/cn/docs/Web/JavaScript/Closures#Creating_closures_in_loops_A_common_mistake

另外,你这代码哪儿有 「删除样式」的逻辑?
adv007
2016-07-18 16:06:59 +08:00
实现这种完全不需要遍历元素啊,楼主在动动脑子。你只需要记录一个当前高亮节点,并且在单击的时候重新指向新的当前节点
YuJianrong
2016-07-18 16:12:14 +08:00
1 , 2 楼确定?我记得时间处理函数的 this 就是 node 元素, lz 用法并没有问题。
narcotics
2016-07-18 16:22:57 +08:00
@YuJianrong 是的,我的错~看到循环闭包就觉得有问题,这里的 this 没问题
sjw199166
2016-07-18 17:49:30 +08:00
因为你没有清除 ;你在上面加一行 清楚所有那个的样式
sjw199166
2016-07-18 17:51:05 +08:00
links[i]. onclick = function () {
//这个去除所有的按钮样式
addClass(this, "cc-selected cc-focused")
}
iTakeo
2016-07-18 17:52:56 +08:00
这里的 this 并没有问题
iyangyuan
2016-07-18 19:06:51 +08:00
没看到清除的代码
LancerComet
2016-07-18 19:15:24 +08:00
没有删除样式的代码

楼主可以递归 this 的 previousElementSibling 跟 nextElementSibling ,或者找 parentNode 的 children
rain0002009
2016-07-18 20:18:31 +08:00
点击高亮么?
只要结构好 js 都不用写 纯 css+html 的 radio 标签就可以实现
yiyizym
2016-07-18 20:44:18 +08:00
links[i]. onclick = function () {
//先删除所有
[].slice.call(links).forEach(function(link){link.classList.remove('cc-selected', 'cc-focused')});
addClass(this, "cc-selected cc-focused")
}
ssyz1988
2016-07-19 13:46:40 +08:00
@adv007 总得有一个取消上一个高亮节点的处理吧?

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/293225

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX