jquery - 在调整大小窗口上获取元素尺寸

Question

我有以下代码

var isSmallScreen = $(".container-inner").width() <= 570;
$(window).resize(function() {
isSmallScreen = $(".container-inner").width() <= 570;
});

console.log(isSmallScreen);

当我调整窗口大小时，我没有得到 isSmallScreen。

我不确定这是我的方法，但我希望能够做一些事情

if (isSmallScreen) {
// hide element
}

Answer 1

当resize事件发生时只resize执行handle，之后的console语句不执行，所有处理resize参数的代码都需要在回调中加入

更新：
如果您想根据调整大小事件做某事，解决方案是使用自定义事件

jQuery(function($){
    var flag;
    $(window).resize(function() {
        var width = $(window).width();
        if(width <= 570){
            if(flag === true || flag == undefined){
                $(window).trigger('smallview', {
                    width: width
                });
                flag = false;
            }
        } else {
            if(flag == false || flag == undefined){
                $(window).trigger('normalview', {
                    width: width
                });
                flag = true;
            }
        }
    }).resize();
})

然后

jQuery(function ($) {
    $(window).on('smallview normalview', function (e) {
        if (e.type == 'smallview') {
            console.log('smallview', 'do something')
        } else {
            console.log('normalview', 'do something')
        }
    });
})

演示：小提琴

Answer 2

与此处的其他建议相比，只有很小的变化。您可以isSmallScreen进入一个函数并在需要时调用它。这（在我看来）只是比你上面的更整洁......

function isSmallScreen() {
    return $(".container-inner").width() <= 570;
}

function smallScreen() {
    // do stuff here because the screen is small
}

$(window).resize(function() {
    if (isSmallScreen()) {
        console.log("isSmallScreen");
        smallScreen();
    }
}).resize();

Answer 3

你必须使用这个代码我很确定它在这里演示

$(window).resize(function() {
var isSmallScreen = $(".container-inner").css("width") <= 570;
console.log(isSmallScreen);
})

Answer 4

您可以使用window.resize()

像这样

$(window).resize(function() {
var isScreenSmaller;
if($(".container-inner").width() <= 570){
  isScreenSmaller = true;
}
else
{
 isScreenSmaller = false;
}
alert(isScreenSmaller);
}).resize();