浏览器使用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().