下面 js 代码如何优化呢?

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

This topic created in 3795 days ago, the information mentioned may be changed or developed.

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 replies • 2016-06-13 16:37:21 +08:00

dallaslu

Jun 13, 2016

至少可以提炼出方法啊。

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

Jun 13, 2016

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

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

O3YwA1ENkb7i35XJ

Jun 13, 2016

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

Jun 13, 2016

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

andy12530

Jun 13, 2016

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

fds

Jun 13, 2016

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

newbieo0O

Jun 13, 2016

有个东东叫 siblings

otakustay

Jun 13, 2016

给所有的 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

Jun 13, 2016

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

Jun 13, 2016

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

Jun 13, 2016

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