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()执行该功能。

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

浏览器使用jquery调整大小后重置变量

2 个答案: