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

下面 js 代码如何优化呢?

  •  
  •   bologer · 2016-06-13 09:07:53 +08:00 · 3362 次点击
    这是一个创建于 3069 天前的主题,其中的信息可能已经有所发展或是发生改变。
    var turl = window.location.search;
        var turls = turl.substr(1);
        if(turls == 1){
            $(".news-category").children().removeClass("current");
            $(".news-category").children().eq(0).addClass("current");
            $(".news1").show();
            $(".news2").hide();
            $(".news3").hide();
            $(".news4").hide();
            $(".news5").hide();
            $(".news6").hide();
        }else if(turls == 2){
            $(".news-category").children().removeClass("current");
            $(".news-category").children().eq(1).addClass("current");
            $(".news2").show();
            $(".news1").hide();
            $(".news3").hide();
            $(".news4").hide();
            $(".news5").hide();
            $(".news6").hide();
        }
        else if(turls == 3){
            $(".news-category").children().removeClass("current");
            $(".news-category").children().eq(2).addClass("current");
            $(".news3").show();
            $(".news1").hide();
            $(".news2").hide();
            $(".news4").hide();
            $(".news5").hide();
            $(".news6").hide();
        }
        else{
            $(".news-category").children().removeClass("current");
            $(".news-category").children().eq(3).addClass("current");
            $(".news4").show();
            $(".news1").hide();
            $(".news3").hide();
            $(".news2").hide();
            $(".news5").hide();
            $(".news6").hide();
        }
    
    16 条回复    2016-06-13 16:37:21 +08:00
    dallaslu
        1
    dallaslu  
       2016-06-13 09:28:49 +08:00   ❤️ 1
    至少可以提炼出方法啊。

    ```javascript
    var turl = window.location.search;
    var turls = turl.substr(1);

    (function(index){
    $(".news-category").children().removeClass("current");
    $(".news1").hide();
    $(".news2").hide();
    $(".news3").hide();
    $(".news4").hide();
    $(".news5").hide();
    $(".news6").hide();

    $(".news-category").children().eq(index-1).addClass("current");
    $(".news" + index).show();
    })(turls);
    ```
    ljcarsenal
        2
    ljcarsenal  
       2016-06-13 10:25:25 +08:00   ❤️ 1
    1.可以用 switch
    2. 需要缓存 dom 元素。。。。。
    3. 如果 news12345 是兄弟元素的话,
    $(".news2").show().siblidngs('div').hide()

    4. 可以利用 数字直接选择 不写 if 。。跟楼上一样
    xqin
        3
    xqin  
       2016-06-13 10:35:06 +08:00   ❤️ 2
    ```javascript


    var turls = ~~location.search.substr(1) || 4;

    $('.news1,.news2,.news3,.news4,.news5,.news6').hide().filter('.news' + turls).show();

    $('.news-category').children().removeClass('current').eq(turls - 1).addClass('current');



    ```
    exoticknight
        4
    exoticknight  
       2016-06-13 10:42:39 +08:00
    看起来就是菜单切换嘛……
    楼上都说得差不多了,加一个
    给元素加一个 .news 的类就可以全部选择再隐藏,然后特定的 news 再显示
    andy12530
        5
    andy12530  
       2016-06-13 10:43:00 +08:00
    先把你的 html 写清楚,一大堆选择器,有啥优化的。
    fds
        6
    fds  
       2016-06-13 11:01:21 +08:00
    写函数, news 用循环和字符串拼接
    newbieo0O
        7
    newbieo0O  
       2016-06-13 11:02:34 +08:00
    有个东东叫 siblings
    otakustay
        8
    otakustay  
       2016-06-13 11:02:56 +08:00
    给所有的 news 再统一加一个.news 的 class 就好办了

    var turl = window.location.search;
    var index = turl.substr(1) - 1;
    $(".news-category").children().removeClass("current").eq(index).addClas("current");
    $(".news").hide();
    $(".news" + index).show();
    pppanda
        9
    pppanda  
       2016-06-13 11:09:26 +08:00
    var turl = window.location.search.substr(1)
    $(".news-category").children().removeClass("current").eq(turl - 1).addClass("current")
    $(".news1,.news2,.news3,.news4,.news5,.news6").hide();
    $(".news" + (turl + 1)).show();
    Niphor
        10
    Niphor  
       2016-06-13 13:00:07 +08:00
    var turl = window.location.search.substr(1)
    var $cates = $(".news-category").children()
    var $news = $(".news1,.news2,.news3,.news4,.news5,.news6")

    $cates.removeClass("current").eq(turl - 1).addClass("current")
    $news.hide().filter(".news" + (turl + 1)).show();

    把楼上的稍微改了一下

    同 7 楼 可以的话 siblings 也挺好用的啊
    Niphor
        11
    Niphor  
       2016-06-13 13:04:11 +08:00
    哦 还少了句 turl = Math.min(turl|0,3)
    kisnows
        12
    kisnows  
       2016-06-13 13:27:54 +08:00
    缓存 DOM 节点
    添加统一隐藏方法,而不是每个都去 hide
    FrankFang128
        13
    FrankFang128  
       2016-06-13 13:33:06 +08:00
    似不似撒?
    bologer
        14
    bologer  
    OP
       2016-06-13 14:47:56 +08:00
    谢谢大神们 学到了很多 前端路途任重道远 幸好有你万分感谢!
    bdbai
        15
    bdbai  
       2016-06-13 16:05:08 +08:00 via Android   ❤️ 1
    上 MVVM 框架吧,大项目用 jQuery 难受得很。
    sdwill
        16
    sdwill  
       2016-06-13 16:37:21 +08:00   ❤️ 1
    给个统一的 class ,如:.news ,然后控制 css 就可以啦:
    .news {display:none;} //默认隐藏
    .news.current {display:block;}
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1092 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 22:39 · PVG 06:39 · LAX 14:39 · JFK 17:39
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.