0

考虑这个例子：

/**/
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？

现在它不起作用

谢谢

4

4 回答 4

2

sizes当您的文档 onReady 函数执行时，没有与之关联的值。事实上，在您的 onResize 函数执行之前，它不会有任何值。

于 2012-08-14T17:06:59.547 回答
1

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

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

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

be aware that global variables in general is a bad idea. In your case you might as well do

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

note the first part of the code will not really work with the way you are using it since, the value is passed to anythingSlider when the document is loaded and will not change when the window is resized (it's a value not a reference). The second part won't solve this problem either but repeating the code in window.resize like below will

var setupSlider = function()
    $('#full_width_anything_slider').anythingSlider({
        delay: $(window).width() <= 1024 ? '300' : '320';
    });
});​
$(function(){
    setupSlider();
});
$(window).resize(setupSlider);
于 2012-08-14T17:07:37.257 回答
1

You are correctly declaring a global variable, however what you are passing into anythingSlider is a snapshot of what the value is, not a reference to a variable that contains that value. Changing the global variable will not change the delay of anythingSlider unless you re-initialize anythingSlider with the new value every time you change it (on resize)

It doesn't need to be global anyway.

$(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");
});

Note however i can't find any documentation on re-initializing this plugin or changing it's options, I'm not sure if this is the correct way to re-initialize it.

于 2012-08-14T17:11:50.870 回答
0

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

/**/
$(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
    });

});​

我假设（并希望）您以后也会使用尺寸？

于 2012-08-14T17:06:39.123 回答