Question

考虑这个例子：

/**/
var sizes;

$(window).resize(function() {

    var viewportWidth = $(window).width();
    //var viewportHeight = $(window).height();
    if (viewportWidth > 1024) {
        sizes = '320';
    } else if (viewportWidth < 1024) {
        sizes = '300';
    }
}); /**/

jQuery(document).ready(function($) {
    console.log(sizes);
    $('#full_width_anything_slider').anythingSlider({
        delay: sizes
    });

});

如何才能访问其他方法中的sizes var？

现在它不起作用

感谢

Answer 1

当您的文档onReady函数执行时，

sizes没有与之关联的值。实际上，在执行onResize函数之前它不会有值。

Answer 2

只要发布的代码未包含在函数中，您的声明就是全局的。

但是，如果您的viewportWidth正好是1024个大小，则永远不会设置。做这样的事情： sizes在调用resize之前不会有值，因此在声明它时设置值并在调整窗口大小时重置它

var sizes = $(window).width() <= 1024 ? '300' : '320';
$(window).resize(function() {
    var viewportWidth = $(window).width();
    sizes = $(window).width() <= 1024 ? '300' : '320';
});

要注意全局变量通常是个坏主意。在你的情况下你也可以这样做

$(function() {
    $('#full_width_anything_slider').anythingSlider({
        delay: $(window).width() <= 1024 ? '300' : '320';
    });
});

注意代码的第一部分将无法真正使用它的方式，因为，当文档加载时，值将传递给anythingSlider，并且在调整窗口大小时不会更改（它的价值不是参考）。第二部分不会解决这个问题，但重复下面的window.resize中的代码将

var setupSlider = function()
    $('#full_width_anything_slider').anythingSlider({
        delay: $(window).width() <= 1024 ? '300' : '320';
    });
});
$(function(){
    setupSlider();
});
$(window).resize(setupSlider);

Answer 3

您正确地声明了一个全局变量，但是您传入anythingSlider的内容是值的快照，而不是对包含该值的变量的引用。更改全局变量不会更改anythingSlider的延迟，除非每次更改时都重新初始化任何滑动器（在调整大小时）

无论如何，它不需要是全球性的。

$(window).resize(function() {
    var sizes = '0';
    var viewportWidth = $(window).width();
    //var viewportHeight = $(window).height();
    if (viewportWidth >= 1024) {
        sizes = '320';
    } else if (viewportWidth < 1024) {
        sizes = '300';
    }
    $('#full_width_anything_slider').anythingSlider({
        delay: sizes
    });
});
$(document).ready(function(){
    $(window).trigger("resize");
});

但请注意，我找不到有关重新初始化此插件或更改其选项的任何文档，我不确定这是否是重新初始化它的正确方法。

Answer 4

这不是很好的做法......但是：

/**/
$(window).resize(function() {
    updateSize();
}); /**/

function updateSize() {
    var viewportWidth = $(window).width();
    //var viewportHeight = $(window).height();
    if (viewportWidth > 1024) {
        sizes = '320';
    } else if (viewportWidth <= 1024) {
        sizes = '300';
    }
}    

jQuery(document).ready(function($) {
    updateSize();
    console.log(sizes);
    $('#full_width_anything_slider').anythingSlider({
        delay: sizes
    });

});

我假设（也希望）你以后也会使用尺码？

如何在javascript中访问全局变量？

4 个答案: