Оптимизировать прокрутку 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

Ну, с самого начала это не очень нравится _look_ ... но так как вы не прокомментировали свой код один бит, я больше не буду заниматься этим. И вообще, такой вопрос лучше подходит для http://codereview.stackexchange.com/ – CBroe

@CBroe Я хотел опубликовать jsfiddle, но мне пришлось бы вставлять каждый скрипт, html и css, что было бы невероятным количеством работы. Спасибо за ссылку – Steve

Ну, для начала, в тех местах, где вы вызываете 'addClass' на один и тот же выбор несколько раз, вы должны использовать' addClass ("class1 class2") 'вместо. Кроме того, вы должны использовать цепочку методов, вместо того чтобы выполнять одни и те же селекторы снова и снова. И, возможно, даже кешировать выбранные объекты (особенно в случаях, когда код может выполняться как _lot_ раз, например, в обработчике прокрутки). И действительно ли не манипулируя классы такого большого количества элементов даже необходимо, по крайней мере, спорно, а также. – CBroe

Вероятно, лучший подход был бы прекратить использование ш * 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, является переключить класс mini на nav элемента и все дети будут затронуты либо правил, которые начинаются с nav.mini (когда класс установлен), или те, которые начинаются с только nav (если он не установлен) автоматически.

(А если не все элементы, которые должны быть затронуты, дети nav элемент - не уверен, потому что вы также выбрать такие вещи, как .fa-shopping-cart в вашем коде - то просто не применить эту технику на nav уровне, но на более высоком общем родительском элементе.)

источник

2014-11-09 03:47:44 CBroe

Вы правы. Я буду помнить это. – Steve

ok нашел проблему. мои css3-переходы больше не работают. – Steve

решена. мой код действительно чист! – Steve

Оптимизировать прокрутку jquery и добавить/удалить класс

ответ

Смежные вопросы