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

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

在不同的屏幕大小更改jQuery函数

1 个答案: