我已经写出了一个非常基本的脚本,用于在加载时添加/删除一个类,或者在调整窗口大小时.
我只是想知道是否有更好的方式这样做,或者是否可以减少代码行.
基本上,我希望能够在较小屏幕上观看网站时更改样式.我认为最好在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');}
});
谢谢
阿娇
解决方法
嗯,我知道我晚了,但是我看到一些不是真正需要的东西,如$(document).ready().
尝试缓存您的选择器,如果你一遍又一遍地打电话,一个var 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);
