下面 js 代码如何优化呢?

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 3090 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

2016-06-13 09:28:49 +08:00

至少可以提炼出方法啊。

```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

2016-06-13 10:25:25 +08:00

1.可以用 switch
2. 需要缓存 dom 元素。。。。。
3. 如果 news12345 是兄弟元素的话，
$(".news2").show().siblidngs('div').hide()

4. 可以利用数字直接选择不写 if 。。跟楼上一样

xqin

2016-06-13 10:35:06 +08:00

```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

2016-06-13 10:42:39 +08:00

看起来就是菜单切换嘛……
楼上都说得差不多了，加一个
给元素加一个 .news 的类就可以全部选择再隐藏，然后特定的 news 再显示

andy12530

2016-06-13 10:43:00 +08:00

先把你的 html 写清楚，一大堆选择器，有啥优化的。

fds

2016-06-13 11:01:21 +08:00

写函数， news 用循环和字符串拼接

newbieo0O

2016-06-13 11:02:34 +08:00

有个东东叫 siblings

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

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

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

2016-06-13 13:04:11 +08:00

哦还少了句 turl = Math.min(turl|0,3)