在不同的屏幕尺寸下更改 jQuery 函数

Question

我有一个脚本正在计算屏幕的宽度 -225px，但是我想在屏幕达到 1100px 时更改它，以便函数只使用整个宽度。

这是我正在使用的代码：

     function slide_holder(){
     $('#main').css({'width': (($(window).width()) - 225 )+'px'});
     $('.flexslider-container').css({'height': (($(window).height()) - 85 )+'px', 'width': (($(window).width()) - 225 )+'px'});
     $('.flexslider').css({'height': (($(window).height()) - 275 )+'px'});
     $('#tS3').css({'height': (($(window).height()) - 200 )+'px'});
     $('#foot').css({'width': (($(window).width()) - 325 )+'px'});
 }

这就是它的称呼：

$(document).ready(function() {  
    slide_holder();
    $(window).bind('resize', slide_holder);
});

我曾想过这样尝试，但我失败了：

$(window).bind("resize", resizeWindow);
        function resizeWindow(e){
            var newWindowWidth = $(window).width();

            // If width width is below 600px, switch to the mobile stylesheet
            if(newWindowWidth < 1100){              

                    function slide_holder(){
                        $('#main').css({'width': (($(window).width()) - 0 )+'px'});
                        $('.flexslider-container').css({'height': (($(window).height()) - 85 )+'px', 'width': (($(window).width()) - 0 )+'px'});
                        $('.flexslider').css({'height': (($(window).height()) - 275 )+'px'});
                        $('#tS3').css({'height': (($(window).height()) - 200 )+'px'});
                        $('#foot').css({'width': (($(window).width()) - 105 )+'px'});
                    }

            }           
            // Else if width is above 600px, switch to the large stylesheet             

            else if(newWindowWidth > 1100){

                function slide_holder(){
                    $('#main').css({'width': (($(window).width()) - 225 )+'px'});
                    $('.flexslider-container').css({'height': (($(window).height()) - 85 )+'px', 'width': (($(window).width()) - 225 )+'px'});
                    $('.flexslider').css({'height': (($(window).height()) - 275 )+'px'});
                    $('#tS3').css({'height': (($(window).height()) - 200 )+'px'});
                    $('#foot').css({'width': (($(window).width()) - 325 )+'px'});
                }
            }
        }

Answer 1

阅读您对您想要实现的效果的描述，并假设您不打算使用基于 CSS 媒体查询的解决方案，您应该能够对您的原始功能进行（相对）最小的更改：

function slide_holder(){
   var winWidth = $(window).width(),
       winHeight = $(window).height(),
       smallMode = (winWidth < 1100);

   $('#main').css({ 'width': (winWidth - (smallMode ? 225 : 0)) +'px' });
   $('.flexslider-container').css({
       'height': (winHeight - (smallMode ? 85 : 0)) +'px',
       'width':  (winWidth - (smallMode ? 225 : 0)) +'px'
   });
   $('.flexslider').css({'height': (winHeight-(smallMode ? 275 : 0)) + 'px'});
   $('#tS3').css({ 'height': (winHeight - (smallMode ? 200 : 0)) + 'px' });
   $('#foot').css({ 'width': (winWidth - (smallMode ? 325 : 0)) + 'px' });
 }

我正在做的是在函数的开头一次获取宽度和高度，而不是连续调用$(window).width()和$(window).height()，然后设置一个布尔值smallMode用于决定与这样的表达式一起使用的偏移量：

(winWidth - (smallMode ? 225 : 0))

这表示如果smallMode 是true 减去255 否则减去0（显然你应该替换你自己的偏移量而不是0）。

阅读您更新的“失败”代码，您似乎想根据 if / else if 条件的结果重新定义 slide_holder() 函数。在一般意义上这是可能的，但不是您使用的语法。如果您使用以下形式的函数声明：

function slide_holder() {
   /* function body */
}

JavaScript 将声明“提升”到包含范围的顶部，即，它假装您的声明位于开头。这意味着使用该语法（在某些浏览器中存在违规行为）不可能有条件地在 if 块中声明函数。实际上，来自if 和else 块的函数声明both 被“提升”到顶部，如果您声明两个同名函数，则第二个函数将覆盖第一个函数。

另一种声明函数的方式是这样的：

var slide_holder = function() {
                     /* function body */
                   };

虽然变量slide_holder 也将被“提升”到作用域的顶部，但在赋值行之前，它不会被分配对实际函数的引用。这意味着您可以像这样执行有条件的 this 或 that 函数“声明”：

var slide_holder;

if ($(window).width() < 1100) {
    slide_holder = function() {
                      /* one version of function */
                   };
} else {
    slide_holder = function() {
                      /* other version of function */
                   };
}

$(window).bind('resize',slide_holder);

就像我最初所说的那样，您可以使用原始函数的一个版本来实现该效果，但在一般意义上，函数声明的这种行为很可能是您更新代码的（主要）问题。