Question

我正在使用旋转木马设计响应式布局。旋转木马有一个控件，允许用户切换整个盒子，隐藏和显示旋转木马。你可以在这里看到完全正常的工作：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应该写得更好，或者页面上的其他内容可能会导致这个问题？

Answer 1

首先，您需要缓存选择器，因此您应该使用

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

然后只使用span.someFunction(); - 这会减少DOM查询并加快速度。

另外，如何为初始选择器添加上下文？因此，如果您知道您所定位的链接位于带有.myBox类的div中，请使用：

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

甚至更好，使用delegate（）：

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

<强>更新

John Hartsock和RightSaidFred指出，如果使用v1.7 +，你应该使用on（）而不是delegate（），如下所示：

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

Answer 2

您有很多冗余，您可以开始将这些$(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;
});

Answer 3

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

Jquery if else语句表现

3 个答案: