在 JQuery 中检测调整大小并以 X 分辨率执行代码

Question

我想要以下内容：

1. 在加载时检测页面宽度，如果类低于/高于 959px 则添加/删除类
2. 如果我调整页面大小，我想做同样的事情

$(window).on("resize load", function(e) {
e = $("body").width();
if (e <= 959) { 
$("#button").addClass("active")
}
if (e >= 960) {
$("#button").removeClass("active")
}
})

这段代码有效，但即使我将窗口大小从 500px 调整为 501px，它也会删除活动类。我希望它仅在我超过 960px 时才添加类，或者如果我低于 959px 时将其删除。我该怎么做？

编辑

感谢您的回答！与此同时，我想出了一个有效且适合我需求的解决方案。

$(window).one("load", function () {
r = $("body").width();
if (r >= 960) {
$("body").attr("mobile","0")
//do something
}
if (r <= 959) {
$("body").attr("mobile","1")
//do something
}
});
$(window).on("resize", function() {
r = $("body").width();
if ($("body").attr("mobile") == "0") {
if (r <= 959) { 
//do something
$("body").attr("mobile","1")
}
}   
if ($("body").attr("mobile") == "1") {
if (r >= 960) { 
//do something
$("body").attr("mobile","0")
}   
}
})

解释：

这是一个非常具体的解决方案，因为我在移动视图中修改了 tabindex 值，并且我不想在简单的调整大小时将这些值更改回 0，只有在我从移动视图切换到桌面的情况下。

Answer 1

window

的宽度与body的宽度不同。 使用$('body').width()将解决溢出问题，而使用$(window).width()将提供实际的屏幕宽度。

$(window).on('load resize', function() {
$('#button').toggleClass('active', $(this).width() <= 959)
});

但是，如果实际上您只是添加 CSS 属性，则使用媒体查询要简单得多。

#button {
opacity: 0.5;
}
@media (max-width: 959px) {
#button {
opacity: 1;
}
}

Answer 2

你可以为此使用 window.matchMedia。如果您查看性能测试，匹配媒体比调整大小要快得多。

var mq = window.matchMedia("(min-width:959px)");
// onload
setButton(mql);
// add listener for the query
mq.addListener(setButton);
function setButton(mq) {
if (mql.matches) {
// do something with your setButton
} else {
// no match....
}
}

Answer 3

在这里，您可以使用解决方案 https://jsfiddle.net/hLkv1xan/1/

$(window).on("resize load", function(e) {
e = $("body").width();
if (e <= 959) {
$("#button").addClass("active")
} else {
$("#button").removeClass("active")
}
});

.active{
background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">
Submit
</button>

我只是稍微修改了一下您的代码，更改了条件。

希望这对您有所帮助。