0

画面の幅-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'});
                }
            }
        }
4

1 に答える 1

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

私が行っているのは、andを継続的に呼び出すのではなく、関数の先頭で幅と高さを1回取得し、次のような式で使用するオフセットを決定するために使用されるブール値を設定することです。$(window).width()$(window).height()smallMode

(winWidth - (smallMode ? 225 : 0))

これは、ifsmallModeがtrue減算255、そうでない場合は減算0することを示しています（明らかに、ではなく独自のオフセットを置き換える必要があります0）。

slide_holder()更新された「失敗」コードを読むと、if /elseif条件の結果に応じて関数を再定義したいようです。一般的な意味では可能ですが、使用している構文では不可能です。次の形式の関数宣言を使用する場合：

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

JavaScriptは、宣言を包含スコープの先頭に「引き上げ」ます。つまり、宣言が最初にあったように見せかけます。これは、その構文（一部のブラウザーでは不規則性があります）では、ifブロック内の関数を条件付きで宣言できないことを意味します。事実上、ブロックとブロックの両方を使用した関数宣言は一番上に「持ち上げられ」、同じ名前の2つの関数を宣言すると、2番目の関数が最初の関数をオーバーライドします。ifelse

関数を宣言する別の方法は次のとおりです。

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

最初に言ったように、元の関数のバージョンで効果を達成できますが、一般的な意味では、関数宣言のこの動作は、更新されたコードの（主な）問題である可能性があります。

于 2012-02-08T04:23:44.243 に答える