jquery - 使用 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() 执行该函数。