jquery，窗口宽度变化时添加/删除类

我编写了一个非常基本的脚本，用于在加载时或调整窗口大小时添加/删除类。

我只是想知道是否有更好的方法来做到这一点或者是否可以减少代码行数。

基本上，我希望能够在较小的屏幕上查看网站时更改样式。我认为最好在 html 标签低于一定宽度时添加一个新类......

无论如何，这是我的代码。

<script type="text/javascript">
 $(document).ready( function() {
    /* Check width on page load*/
    if ( $(window).width() < 514) {
     $('html').addClass('mobile');
    }
    else {}
 });

 $(window).resize(function() {
    /*If browser resized, check width again */
    if ($(window).width() < 514) {
     $('html').addClass('mobile');
    }
    else {$('html').removeClass('mobile');}
 });

Thanks

Gillian

好吧，我知道我参加聚会迟到了，但我看到了一些事情，比如$(document).ready()那其实没有必要。

如果您一遍又一遍地调用选择器，请尝试缓存它们var $window = $(window);这将有助于提高性能。我使用函数表达式进行封装，以保持在全局范围之外，但仍然可以访问我的$window and $html缓存 jQuery 选择的元素。

(function($) {
    var $window = $(window),
        $html = $('html');

    $window.resize(function resize(){
        if ($window.width() < 514) {
            return $html.addClass('mobile');
        }

        $html.removeClass('mobile');
    }).trigger('resize');
})(jQuery);

http://jsfiddle.net/userdude/rzdGJ/1 http://jsfiddle.net/userdude/rzdGJ/1

可能更干净一些，更容易遵循：

(function($) {
    var $window = $(window),
        $html = $('html');

    function resize() {
        if ($window.width() < 514) {
            return $html.addClass('mobile');
        }

        $html.removeClass('mobile');
    }

    $window
        .resize(resize)
        .trigger('resize');
})(jQuery);

http://jsfiddle.net/userdude/rzdGJ/2 http://jsfiddle.net/userdude/rzdGJ/2