Question

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

 $(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");
        }
    });
});

Answer 1

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

因此，不是将zoomInUp添加到图像，nav-font添加到链接，依此类推等等......只需以这样的方式编写CSS，即更改< em>仅 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中必须执行的唯一事件是切换mini元素上的类nav - 并且所有子项都将受到规则的影响从nav.mini开始（设置类时），或者以nav开头（未设置时）自动。

（如果并非所有需要受影响的元素都是nav元素的子元素 - 不确定，因为您还在代码中选择.fa-shopping-cart之类的内容 - 那么就不要在nav级别应用此技术，但在较高的公共父元素上应用此技术。）

优化jquery滚动并添加/删除类

1 个答案: