在不同的屏幕尺寸更改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 m EDIA基于查询的解决方案，你应该能够与（相对）最小的改变你原有的功能做到这一点：

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

就像我一开始说的，你可以实现与原始版本的功能的效果，但在一般意义上这种行为的函数声明很可能是更新代码的（主要）问题。