JQuery если еще заявление производительности - PullRequest
Новая
       0

JQuery если еще заявление производительности

1 голос
/ 04 декабря 2011

Я разрабатываю адаптивный макет с каруселью.Карусель имеет элемент управления, который позволяет пользователю переключать всю коробку, скрывая и показывая карусель.Вы можете видеть это полностью работающим здесь: http://pixelcakecreative.com/cimlife/responsive2/

Кажется, что он работает очень вяло.Я думал, что мой jquery был написан плохо, и это может замедлить производительность.Мой jquery выглядит следующим образом: 

$("#closeBox a").click(function(){
            if ($(this).find('span').hasClass('minus')) {
               $(this).find('span').removeClass('minus').addClass('plus');
               $(".padCar").css("padding-bottom","0");

            } else if ($(this).find('span').hasClass('plus')) {
                 $(this).find('span').removeClass('plus').addClass('minus');
                 $(".padCar").css("padding-bottom","20px");
            }
            $('#carousel').slideToggle('slow');

        return false;
        });

Есть идеи, почему это так нервно?Возможно, мой jquery должен быть лучше написан, или это может быть вызвано чем-то другим на странице?

Ответы [ 3 ]

2 голосов
/ 04 декабря 2011

Ну, во-первых, вам нужно кэшировать ваши селекторы, поэтому вы должны использовать 

var span = $(this).find('span');

А затем просто используйте span.someFunction(); - это уменьшит количество запросов DOM и ускорит его.

А как насчет добавления контекста в ваш начальный селектор? Поэтому, если вы знаете, что ссылки, на которые вы нацеливаетесь, находятся внутри div с классом .myBox, используйте: 

$('#closebox a', '.myBox')

Или, что еще лучше, используйте делегат (): 

$('.myBox').delegate('#closebox a', 'click', function(){ ... });

Обновление

Как отметили Джон Хартсок и RightSaidFred, если вы используете v1.7 +, вы должны использовать on (), а не Delegate (), как показано ниже: 

$('.myBox').on('click', '#closebox a', function(){ ... });
1 голос
/ 04 декабря 2011

У вас там много избыточности, вы можете начать заменять эти $(this).find('span') на var span = $(this).find('span')

$("#closeBox a").click(function(){
       var span = $( this ).find( 'span' );
       if ( span.hasClass('minus')) {
           span.removeClass('minus').addClass('plus');
           $(".padCar").css("padding-bottom","0");
       } else if ( span.hasClass('plus')) {
          span.removeClass('plus').addClass('minus');
          $(".padCar").css("padding-bottom","20px");
       }
       $('#carousel').slideToggle('slow');
       return false;
});
0 голосов
/ 04 декабря 2011 
$("#closeBox a").click(function(){
var spn = $(this).find('span');
            if (spn.hasClass('minus')) {
               spn.removeClass('minus').addClass('plus');
               $(".padCar").css("padding-bottom","0");

            } else {
                 spn.removeClass('plus').addClass('minus');
                 $(".padCar").css("padding-bottom","20px");
            }
            $('#carousel').slideToggle('slow');

        return false;
        });
...