浏览器使用jqueryresize后重置变量

我正在尝试创建一个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

试试这个

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