为活动主体 class 正确循环对象 key/values

Question

我正在尝试遍历一个包含一些数据的对象，将值与 window 宽度进行比较，找出范围内的 'active'，然后使用它在正文标签中。

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;
        }
    }
});

示例：

如果window width = 800 那意味着activeClass应该是'size-m'.
如果window width = 1023 那意味着activeClass应该是'size-m'.
如果window width = 1024 那意味着activeClass应该是'size-l'.

相当确定这是方向，但不了解前提才能继续前进。一点帮助就太好了:)

注意：充分了解 css 媒体查询 - 请务必使用 js 解决方案:)

Answer 1

问题是将相同的属性与 < 和 >

进行比较的逻辑

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

我改正了，也引入了不同的逻辑。断点可以像这样工作

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

现在每个断点都有更大的屏幕尺寸，就像一个链接的哈希图。当心瓶颈。

工作 fiddle 在这里 https://jsfiddle.net/p7nh7eyn/

Answer 2

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

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;
        }
    }
});

为活动主体 class 正确循环对象 key/values

Loop through object key/values correctly for active body class

javascript

jquery

key-value

for-in-loop