V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
older
V2EX  ›  JavaScript

帮忙看一段 js 代码

  •  
  •   older · 2016-07-18 15:41:42 +08:00 · 3145 次点击
    这是一个创建于 3048 天前的主题,其中的信息可能已经有所发展或是发生改变。
    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 。现在点击能追加样式,可不能删除
    13 条回复    2016-07-19 13:46:40 +08:00
    xjp
        1
    xjp  
       2016-07-18 15:46:46 +08:00
    ```
    links[i]. onclick = function () {
    addClass(this, "cc-selected cc-focused")
    };
    ```

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

    楼主可以递归 this 的 previousElementSibling 跟 nextElementSibling ,或者找 parentNode 的 children
    rain0002009
        11
    rain0002009  
       2016-07-18 20:18:31 +08:00
    点击高亮么?
    只要结构好 js 都不用写 纯 css+html 的 radio 标签就可以实现
    yiyizym
        12
    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
        13
    ssyz1988  
       2016-07-19 13:46:40 +08:00
    @adv007 总得有一个取消上一个高亮节点的处理吧?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3400 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 717ms · UTC 04:44 · PVG 12:44 · LAX 20:44 · JFK 23:44
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.