Question

我有一个包含浏览器宽度列表的对象

breakpoints {
    smallMobile: 0, 
    mobile: 480, 
    tablet: 672, 
    desktop: 868, 
    largeDesktop: 1050
}

我想根据浏览器宽度是否落在断点对象中的两个值之间，为文档的body添加一个类。

到目前为止我有什么

var key;

for (key in breakpoints) {
    if (breakpoints.hasOwnProperty(key))
        if (winWidth >= breakpoints[key]) {
            $('body').removeClass().addClass(key);
        } else {
            $('body').removeClass(key);
        }
    }
}

现在这可行，但它也会从body删除所有类。相反，我想只添加一个类，除非断点不再匹配，否则不必删除任何内容。

我确定必须有办法。任何帮助将不胜感激：）

修改

各种宽度的电流输出

＆gt; = 1050：<body class="smallMobile mobile tablet desktop largeDesktop">

＆gt; = 868：<body class="smallMobile mobile tablet desktop">

＆gt; = 672：<body class="smallMobile mobile tablet">

理想输出

＆gt; = 1050：<body class="largeDesktop">

＆gt; = 868：<body class="desktop">

＆gt; = 672：<body class="tablet">

（对于记录我使用媒体查询，但我需要访问边缘情况的类名）

Answer 1

我稍微修改了您的代码并保存了最适用的类。然后我删除每个课程并应用适用的课程。

// create a variable to store the only class you want to apply
var apply = "";
for (var key in breakpoints) {
    // keep overwriting the apply var if the new key is applicable
    if (winWidth >= breakpoints[key]) {
       apply = key;
    }
    // remove any existing classes with that keyname
    $('body').removeClass(key);
}
// add the key to the body as a class
$('body').addClass(apply);

此外，您可以删除breakpoints.hasOwnProperty(key)，因为for - 循环仅循环通过实际存在的密钥，因此您正在进行不必要的检查。

更新

在@ juvian的笔记中，我将添加一种方法来确保您创建对象的顺序没有区别：

var apply = "";
var check = 0;
for (var key in breakpoints) {
    // Also check if the value is higher than the last set value
    if (winWidth >= breakpoints[key] && breakpoints[key] >= check) {
        apply = key;
        check = breakpoints[key];
    }
    $('body').removeClass(key);
}
$('body').addClass(apply);

Answer 2

这是因为你在使用removeClass（）而没有任何参数。

如果包含类名作为参数，则只有该类从匹配元素集中删除。如果没有类名在参数中指定的所有类都将被删除。

来源：http://api.jquery.com/removeClass/

因此，您应该找到要删除的正确类，然后使用参数调用此函数。

Answer 3

考虑将断点存储在已排序的数组中而不是map：

var dimensions = [];
for (var key in breakpoints) {
   dimensions.push({ name: key, width: breakpoints[key] })
}

dimensions.sort(function(a, b) { return b.width - a.width });

现在维度是

[
    {"name":"largeDesktop","width":1050},
    {"name":"desktop","width":868},
    {"name":"tablet","width":672},
    {"name":"mobile","width":480},
    {"name":"smallMobile","width":0}
]

当然，您可以在此结构中对其进行硬编码，而不是每次都进行grep / sort。

最后，使用

找到最高宽度

for (var i = 0; i < dimensions.length; i++) {
    if (winWidth >= dimensions[i].width) {
        $("body").addClass(dimensions[i].name);
        break;
    }
}

但是，如果您想创建自适应布局，那么媒体查询就是您的选择。媒体查询还会考虑窗口调整大小/方向更改事件。

Answer 4

这是一种可以获得与最高值匹配的方法：

var wid = 868;
var max = 0;
var size = null;

Object.keys(breakpoints).map(function(a){
    size = wid >= breakpoints[a] ? a : size;
    max = wid >= breakpoints[a] ? Math.max(max,breakpoints[a]) : max;
})
console.log(max, size) // 868, 'desktop'

Answer 5

如果你使用没有参数的.removeClass（），那么所选元素上的所有类都会像prabu一样删除，但如果你愿意，我举一些例子，如果窗口宽度小于断点，你就不会混淆如何删除类< / p>

var key;
for (key in breakpoints) { 
    if (breakpoints.hasOwnProperty(key)) {
        $("body").addClass(key);
        if (winWidth<breakpoints[key]) {
            $("body").removeClass(key);
        }
    }
}

JavaScript Object Literal和jQuery $（类）

到目前为止我有什么

修改

5 个答案:

更新