jqueryを使用してブラウザのサイズを変更した後の変数をリセット

Question

準備ができているときとブラウザウィンドウのサイズを変更したときに呼び出すことができるjquery関数を作成しようとしています。

jQuery(document).ready(function($) { 

function setWidth() { 
    var windowWidth = $(window).width(); 
    var boxWidth = $('#addbox').width(); 
    var paddingWidth = (windowWidth - boxWidth)/2; 
}; 

$(setWidth); 

$(window).resize(setWidth); 

$(".scroll").click(function(event){  
    event.preventDefault(); 
    $('html,body').animate({scrollLeft:$(this.hash).offset().left-paddingWidth}, 750); 
}); 

}）;

しかし、このコードは動作していないようですが、firebugによるとpaddingWidthは定義されていません。私は間違って何をしていますか？

Answer 1

変数には、定義された範囲（varを使用）が含まれます。あなたの場合、これはsetWidthの中でのみ定義され、そのメソッドの実行ごとに再初期化されることを意味します。

子孫スコープ内の関数がその値にアクセスできるように、それらを包含スコープに移動する必要があります。

jQuery(document).ready(function ($) { 
    var windowWidth, boxWidth, paddingWidth; // declare variables in this scope 

    function setWidth() { 
     windowWidth = $(window).width(); // set variables in this scope 
     boxWidth = $('#addbox').width(); 
     paddingWidth = (windowWidth - boxWidth)/2; 
    }; 

    setWidth(); // just call the function 

    $(window).resize(setWidth); 

    $(".scroll").click(function (event) { 
     event.preventDefault(); 
     $('html,body').animate({ 
      scrollLeft: $(this.hash).offset().left - paddingWidth 
     }, 750); 
    }); 
}); 

$(setWidth)は、奇数の呼び出しであり、比較的高価なものです。それは、 "setWidthと書類が準備ができたら"と言う。あなたはjQuery(document).readyハンドラに入っているので、それは本当であると確信することができます。 setWidth()で関数を実行することができます。

Answer 2

は、あなたが `paddingWidth`にアクセスしようとしているものの範囲では、この

jQuery(document).ready(function($) { 

var paddingWidth = 0; 

function setWidth() { 
    var windowWidth = $(window).width(); 
    var boxWidth = $('#addbox').width(); 
    paddingWidth = (windowWidth - boxWidth)/2; 
}; 

$(setWidth); 

$(window).resize(setWidth); 

$(".scroll").click(function(event){  
    event.preventDefault(); 
    $('html,body').animate({scrollLeft:$(this.hash).offset().left-paddingWidth}, 750); 
});