Javascript 正确循环活动实体类的对象键/值

我试图循环遍历一个包含一些数据的对象，将该值与窗口宽度进行比较，找出该范围内哪一个基本上处于“活动”状态，然后在body标记中使用该值

var breakpoints = {'size-s': 320, 'size-m': 768, 'size-l': 1024, 'size-xl': 1440},
    activeClass;

$(window).on('resize orientationchange', function () {
    for (var prop in breakpoints) {
        if($(window).width() > breakpoints[prop] && $(window).width() < breakpoints[prop]) {
            activeClass = prop;
        }
    }
});

var断点={'size-s'：320，'size-m'：768，'size-l'：1024，'size-xl'：1440}，
活动类；
$（窗口）.on（'resize orientationchange'，function（）{
for（断点中的var prop）{
if（$（window.width（）>断点[prop]&&&$（window.width（）<断点[prop]）{
activeClass=prop；
}
}
});

示例：

• 如果窗口宽度=800，则表示activeClass应为“size-m”
• 如果windowwidth=1023，则表示activeClass应为“size-m”
• 如果windowwidth=1024，则表示activeClass应为“size-l”

相当确定这是方向，但不理解进展的前提。一点帮助就好了：）

---

注意：非常了解css媒体查询-必须是js解决方案（请：）

问题在于比较与

$(window).width() > breakpoints[prop] && $(window).width() < breakpoints[prop]

现在，每个断点都有了更大的屏幕大小，就像一个链接的哈希映射。小心瓶颈

---

工作小提琴在这里

问题是比较相同属性的逻辑

$(window).width() > breakpoints[prop] && $(window).width() < breakpoints[prop]

现在，每个断点都有了更大的屏幕大小，就像一个链接的哈希映射。小心瓶颈

---

工作小提琴在这里

假设您可以更改输入对象，我会让它看起来像这样：

var breakpoints = {
     'size-s': { min:0, max: 320}, 
     'size-m': { min:320, max: 768}, 
     'size-l': { min:768, max: 1024}, 
     'size-xl': { min:1024, max: 1440}
};

希望您能看到它使代码变得多么简单

$(window).on('resize orientationchange', function () {
    for (var prop in breakpoints) {
        if($(window).width() > breakpoints[prop].min && $(window).width() <= breakpoints[prop].max) {
            activeClass = prop;
        }
    }
});

$（窗口）.on（'resize orientationchange'，function（）{
for（断点中的var prop）{
如果（$（window）.width（）>断点[prop].min&$（window）.width（）假设您可以更改输入对象，我将改为如下所示：

var breakpoints = {
     'size-s': { min:0, max: 320}, 
     'size-m': { min:320, max: 768}, 
     'size-l': { min:768, max: 1024}, 
     'size-xl': { min:1024, max: 1440}
};

希望您能看到它使代码变得多么简单

$(window).on('resize orientationchange', function () {
    for (var prop in breakpoints) {
        if($(window).width() > breakpoints[prop].min && $(window).width() <= breakpoints[prop].max) {
            activeClass = prop;
        }
    }
});

$（窗口）.on（'resize orientationchange'，function（）{
for（断点中的var prop）{
if（$（window）.width（）>断点[prop].min&$（window）.width（）为什么不使用响应式样式表呢？简单得多，更可靠如果（$（window）.width（）>断点[prop]&$（window）.width（）<断点[prop]）
也可以使用该函数。应该使用
$（window）.width（）==断点[prop]
代替
$（窗口）.width（）>断点[prop]&&$（窗口）.width（）<断点[prop]
如果您想查看equality@AniketSahrawat如果不是更糟的话，那将是同样糟糕的。不是每个人都使用完全最大化的浏览器窗口为什么不使用响应式样式表呢？更简单、更可靠这实际上不可能是真的
if（$（window）.width（）>breakpoints[prop]&（$（window）.width（）
您也可以使用该函数。您应该使用
$（窗口）.width（）==断点[prop]
代替
$（窗口）.width（）>断点[prop]&&$（窗口）.width（）<断点[prop]
如果您想查看equality@AniketSahrawat如果不是更糟的话，那将是同样糟糕的。不是每个人都使用完全最大化的浏览器窗口。好的，梅尔文！伟大的解决方案！好的，梅尔文！伟大的解决方案！