优化jquery滚动和添加/删除类答案

【问题标题】：Optimize jquery scroll and add / remove class优化jquery滚动和添加/删除类
【发布时间】：2014-11-09 02:35:16
【问题描述】：

我的问题是我这样做是否正确。我有一个滚动事件，并为不同的元素添加类和删除类。如您所见，代码有点大。这种方法可以还是有更有效的方法？

 $(document).ready(function(){
    $(window).scroll(function() {    
        var scroll = $(window).scrollTop();

        if (scroll >= 50) {
            $("nav ul li").addClass("list-mini");
            $("nav").addClass("nav-mini");
            $("nav ul li a").addClass("nav-recolor");
            $("nav img").removeClass("zoomOutLeft");
            $("nav img").addClass("zoomInUp");
            $("nav img").addClass("logo-mini-active");
            $("nav ul").addClass("margin-transition");
            $("ul").addClass("ul-active");      
            $("nav ul li a span").addClass("text-removed");
            $("nav ul li a").addClass("nav-font");
            $("nav ul li a span").addClass("transition-02s");
            $(".fa-shopping-cart").addClass("fa-shopping-cart-mini");
            $(".fa-globe").addClass("fa-globe-mini");
            $(".fa-info").addClass("fa-info-mini");
            $(".fa-circle-o-notch").addClass("fa-circle-o-notch-mini");
            $(".fa-envelope-o").addClass("fa-envelope-o-mini");
        } else {
            $("*").removeClass("margin-transition, list-mini, nav-mini, nav-recolor, nav-recolor, zoomInUp, zoomOutLeft, ul-active, text-removed, nav-font, transition-02s, fa-shopping-cart-mini, fa-globe-mini, fa-info-mini, fa-circle-o-notch-mini, fa-envelope-o-mini");
        }
    });
});

【问题讨论】：

好吧，一开始它看起来不太好……但是由于您没有对您的代码进行一点评论，所以我不会再参与其中.而且无论如何，这样的问题更适合codereview.stackexchange.com
@CBroe 我想发布一个 jsfiddle，但我必须粘贴每个脚本、html 和 css，这将是一项令人难以置信的工作量。感谢您的链接
对于初学者来说，在您多次调用同一选择的addClass 的地方，您应该改用addClass("class1 class2")。此外，您应该使用方法链接，而不是一遍又一遍地执行相同的选择器。甚至可能缓存您选择的对象（尤其是在代码可能被执行很多次的情况下，例如在滚动处理程序中）。而且是否有必要操作这么多元素的类，至少也是有争议的。
stackoverflow.com/questions/25711004/…的可能重复
@CBroe 我正在考虑做一些事情，例如 $("nav").css({height: '100px'});而不是添加一个保存高度值的类。哪个更有效？如您所见，问题是每个班级都是独一无二的。没有小孩。如果有兄弟姐妹，那么每个兄弟姐妹都有一个唯一的类。一切都是独一无二的。我唯一能想到的是一种优化 nav 元素中所有这些类的删除的方法。有没有办法在全球范围内定位课程？喜欢（“.class”）？

标签： jquery

【解决方案1】：

可能更好的方法是停止在导航的无数个子元素上使用 sh*tload 类 - 而是让智能使用 CSS 提供的可能性。

所以不要在图片中添加zoomInUp，在链接中添加nav-font，等等等等……只需以这样的方式编写你的CSS，只有nav 父元素的类在必要时更改其子元素的格式所有：

nav img { /* formatting to apply on images in normal mode */ }
nav.mini img { /* formatting to apply on images in “mini” mode */ }
nav ul li a { /* formatting to apply on links in normal mode */ }
nav.mini ul li a { /* formatting to apply on links in “mini” mode */ }
/* and so on */

那么唯一你必须在你的 JavaScript 中做的事情就是在 nav 元素上切换 mini 类——所有的孩子都会受到以 @ 开头的规则的影响987654327@（设置类时），或仅以nav 开头的那些（未设置时）自动。

（如果不是所有需要影响的元素都是 nav 元素的子元素 - 不确定，因为您还在代码中选择了诸如 .fa-shopping-cart 之类的东西 - 那么就不要在nav 级别，但在更高的公共父元素上。）

【讨论】：