在不同的屏幕尺寸下更改 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 块中的函数声明都会被“提升”到顶部，并且如果您声明两个具有相同功能的函数命名第二个覆盖第一个。

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

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

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

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);

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