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

我的问题是如果我这样做的权利。我有一个滚动事件，添加类和删除不同元素的类。正如你所看到的代码有点大。这个方法好吗，还是有更高效的方法？优化jquery滚动和添加/删除类

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

来源

2014-11-09 Steve

嗯，它并不是很好看......但是由于您没有对您的代码发表评论，所以我不打算再继续使用它。无论如何，这样的问题更适合http://codereview.stackexchange.com/ – CBroe 2014-11-09 02:38:00

@CBroe我想发布一个jsfiddle，但我将不得不粘贴每个脚本，html和css，这将是一个令人难以置信的工作量。感谢您的链接 – Steve 2014-11-09 02:45:20

对于初学者来说，在多次调用'addClass'的地方，您应该使用'addClass（“class1 class2”）'。此外，您应该使用方法链接，而不是一遍又一遍地执行相同的选择器。甚至可能缓存你选择的对象（特别是在代码可能被执行一次_lot_次的情况下，例如在滚动处理器中）。而且，是否有必要操纵这类许多元素的类别，至少是有争议的。 – CBroe 2014-11-09 02:50:04

可能是一个更好的办法是停止使用一个类的的sh * t加载在导航无数子元素 - 而是让智能使用的可能性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和所有的孩子们将通过，要么与启动规则的影响nav.mini（当类设置），或那些只nav（当它没有设置）启动自动。（如果不是所有需要影响的元素都是nav元素的子元素 - 不确定，因为您还在代码中选择了诸如.fa-shopping-cart之类的东西 - 那么就不要在nav级别应用此技术，但是在一个更高的通用父元素上。）

来源

2014-11-09 03:47:44 CBroe

你说得对。我会记住这一点。 – Steve 2014-11-09 04:18:33

确定发现问题。我的css3转换不再工作了。 – Steve 2014-11-09 04:50:00

解决了。我的代码现在真的很干净！ – Steve 2014-11-09 15:22:07

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

回答

相关问题