重置变量浏览器使用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); 
});