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句柄，之后的控制台语句不会被执行，所有处理resize参数的代码都需要在回调中添加

<强>更新
如果您想根据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')
        }
    });
})

演示：Fiddle

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()

像这样

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

Answer 4

您必须使用此代码我非常确定Demo here

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

在调整大小窗口中获取元素维度

4 个答案: