重置變量瀏覽器使用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); 
}); 

}）;

但該代碼似乎並沒有工作，螢火蟲說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

試試這個

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