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

Question

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

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

基本上，我希望能够在较小的屏幕上查看网站时更改样式。我认为最好在 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');}
 });

谢谢

阿娇

Answer 1

好吧，我知道我迟到了，但我看到了一些像 $(document).ready() 这样的东西，这并不是真正必要的。

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

可能更清晰一些，更容易遵循:

(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