下面 js 代码如何优化呢?

2016-06-13 09:07:53 +08:00
 bologer
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();
    }
3421 次点击
所在节点    JavaScript
16 条回复
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)
kisnows
2016-06-13 13:27:54 +08:00
缓存 DOM 节点
添加统一隐藏方法，而不是每个都去 hide
FrankFang128
2016-06-13 13:33:06 +08:00
似不似撒？
bologer
2016-06-13 14:47:56 +08:00
谢谢大神们 学到了很多 前端路途任重道远 幸好有你万分感谢!
bdbai
2016-06-13 16:05:08 +08:00
上 MVVM 框架吧，大项目用 jQuery 难受得很。
sdwill
2016-06-13 16:37:21 +08:00
给个统一的 class ，如：.news ，然后控制 css 就可以啦：
.news {display:none;} //默认隐藏
.news.current {display:block;}

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://tanronggui.xyz/t/285264

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX