V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
83f420984
V2EX  ›  程序员

问个关于斑马线效果 JS 问题

  •  
  •   83f420984 · 2014-06-26 08:48:34 +08:00 · 3516 次点击
    这是一个创建于 3803 天前的主题,其中的信息可能已经有所发展或是发生改变。
    代码 :



    我自己理解:

    第一次循环,开始判断"tr"标签是不是为真,由于"tr"标签上没有“odd”这个class,所以第一次循环的结果为假,然后跳到“else”里面,把“odd”这个变量变成“true”;开始第二次循环,判断第二个"tr"标签,由于上次已经把“odd”这个变量变成“true”,所以这次的判断结果为真,则给第二个标签加“odd”这个class,然后把“odd”这个变量就成“false”;

    不知道对不对 ,请指点,谢谢
    13 条回复    2014-06-26 14:27:44 +08:00
    coolicer
        1
    coolicer  
       2014-06-26 08:51:27 +08:00
    感觉好麻烦的样子。直接取所有tr,然后%2 不行吗?
    83f420984
        2
    83f420984  
    OP
       2014-06-26 08:52:53 +08:00
    @coolicer 这个是《DOM编程艺术》上的例子,为初学者准备的
    sneezry
        3
    sneezry  
       2014-06-26 08:54:40 +08:00
    第二次循环结束后odd变成false了,楼主最后一句可能口误了。就是这样的过程,楼主没理解错。

    题外话,可以用:nth-child(odd)伪类来用css实现这种效果。
    coolicer
        4
    coolicer  
       2014-06-26 08:56:42 +08:00
    @83f420984 哦,是这样的
    83f420984
        5
    83f420984  
    OP
       2014-06-26 08:56:56 +08:00
    @sneezry 这代代码我想了好长时间,始终想不通,就在我把这个代码用中文写出来的时候,就明白了,然后又不知道理解是不是对,谢谢
    wizaliu
        6
    wizaliu  
       2014-06-26 10:00:01 +08:00
    用这么麻烦吗???css不能实现?
    Mutoo
        7
    Mutoo  
       2014-06-26 10:04:28 +08:00
    odd变量是一个分支开关

    重复 {

     当(odd为真) {

      //做点什么

      将odd置为假

     } 不然 {

      //什么也不做

      将odd置为真

     }

    }
    83f420984
        8
    83f420984  
    OP
       2014-06-26 10:12:41 +08:00
    @Mutoo 老兄这么解释的很直观,最开始的直观理解代码的意思和老兄回复的一样,当初我不明白是,这段代码在去运行时,我不知道它是如何在工作,比如说,它是怎么在“tr”标签上完成一些事情。
    83f420984
        9
    83f420984  
    OP
       2014-06-26 10:13:23 +08:00
    @wizaliu CSS可以完成这些,只不过我在初学JS,学习中。。。
    Mutoo
        10
    Mutoo  
       2014-06-26 11:22:27 +08:00   ❤️ 1
    @83f420984

    rows = document.getElementsByTagName("tr"); // 把所有 tr 存到 rows 数组中

    addClass(rows[j], "odd"); // 把 "odd" 添加到第 j 个 tr 的 class="" 里面

    具体的修改 DOM 的操作是由下面的 addClass 函数完成的。

    相关资料 http://www.w3school.com.cn/jsref/prop_classname.asp
    nilennoct
        11
    nilennoct  
       2014-06-26 13:21:32 +08:00   ❤️ 1
    for (var j = 1; j < rows.length; j += 2) {
    addClass(rows[j], 'odd');
    }
    lemonlwz
        12
    lemonlwz  
       2014-06-26 13:48:33 +08:00   ❤️ 1
    0, 1, 0, 1, 0, 1 ^M
    1, 0, 1, 0, 1, 0 ^M
    0, 1, 0, 1, 0, 1 ^M
    ...
    练习题在于举一反三, 你有空可以尝试一下这个, ^M 是换行.
    83f420984
        13
    83f420984  
    OP
       2014-06-26 14:27:44 +08:00
    @Mutoo 感谢
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2848 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 20ms · UTC 07:18 · PVG 15:18 · LAX 23:18 · JFK 02:18
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.