jQuery：根据浏览器窗口分辨率动态添加类
朋友您好我正在尝试根据浏览器窗口分辨率动态添加类。 这是我试图使用的代码，但需要帮助调整它，因为我根本不知道jQuery。
我想要实现的选项是：
一旦访问者访问我的网站，此代码必须检查其浏览器窗口大小，并按照以下规则将类添加到正文
-
如果窗口大小超过 1024px 但小于 1280px，则添加类
.w1280。 -
如果窗口大小超过 1280px 但小于 1440px，则添加类
.w1440。 -
如果窗口大小超过 1440px 但小于 1280px，则添加类
.w1680。 -
如果窗口大小超过 1680px，则添加类
.wLarge。
为此，我尝试使用以下脚本。 我的问题是：
-
这是正确的代码吗？ 如果不是什么是正确的代码？
-
这是最短的代码吗？ 如果不是正确的代码是什么？
请帮助，因为我对jQuery的了解几乎是零。
function checkWindowSize() { if ( $(window).width() > 1024) { $('body').addClass('w1280'); } else { $('body').removeClass('w1280'); } if ( $(window).width() > 1280 ) { $('body').addClass('w1440'); } else { $('body').removeClass('w1440'); } if ( $(window).width() > 1440) { $('body').addClass('w1680'); } else { $('body').removeClass('w1680'); } if ( $(window).width() > 1600) { $('body').addClass('wLarge'); } else { $('body').removeClass('wLarge'); } } checkWindowSize()
如果您没有在body元素上存储任何其他类，则可以执行以下操作：
function checkWindowSize() { var width = $(window).width(); document.body.className = width > 1600 ? 'wLarge' : width > 1440 ? 'w1680' : width > 1280 ? 'w1440' : width > 1024 ? 'w1280' : ''; }
有些人可能会建议你用switch语句来做，但是，有些人也喜欢吃他们的年轻人。
这个函数每次被调用时都会覆盖body的类（默认情况下，如果浏览器小于/等于1024像素，根本就没有类），所以就像我说的那样，如果你的body有其它的话它将不起作用需要维护的类。
编辑 PerŠime的建议，这是一种更安全的方法：
function checkWindowSize() { var width = $(window).width(), new_class = width > 1600 ? 'wLarge' : width > 1440 ? 'w1680' : width > 1280 ? 'w1440' : width > 1024 ? 'w1280' : ''; $(document.body).removeClass('wLarge w1680 w1440 w1280').addClass(new_class); }
这对我有用，感谢Naina的评论： https ： //www.quora.com/How-do-I-add-and-remove-CSS-classes-using-jQuery-based-on-the-screen-size