我想知道一旦屏幕尺寸低于 1000px 使用 jquery,我将如何选择此类并将其更改为 span12
<div class="span4 minus65">
我在用
$(window).resize(function(){
if($(this).outerWidth() < 1000){
$('.span4 minus65').attr('class',"span12");
}
});
但是当屏幕宽度低于 1000px 时没有任何变化
我想知道一旦屏幕尺寸低于 1000px 使用 jquery,我将如何选择此类并将其更改为 span12
<div class="span4 minus65">
我在用
$(window).resize(function(){
if($(this).outerWidth() < 1000){
$('.span4 minus65').attr('class',"span12");
}
});
但是当屏幕宽度低于 1000px 时没有任何变化
用于选择具有多个类的 div
$('.span4.minus65')
并替换所有类:
$('.span4.minus65').removeClass().addClass('span12');
或只更换一个班级
$('.span4.minus65').removeClass('span4').addClass('span12');
听起来你想使用addClass
andremoveClass
功能
例如
$(window).resize(function(){
if($(this).outerWidth() < 1000){
$('.span4 minus65').removeClass('span4').addClass('span12');
}
});
如果你不能使用媒体查询,你应该使用“addClass”和“removeClass”
$(el).addClass('span12').removeClass('span4');
根据浏览器的不同,“resize”有时会触发,有时会触发太频繁。您应该使用您在“resize”事件中使用的函数并定期触发它,如下所示:
var resizeFunc = function(){
//add/remove classes
};
//"fix" the sizing even if "resize" doesn't fire.
setInterval(resizeFunc(), 1000);
jQuery(document).resize(resizeFunc);
此外,调整大小会触发......很多。您还可以“限制”它,使其每几百毫秒不会触发一次以上。
您可能应该考虑为此使用媒体查询(在较新版本的 IE 和所有其他现代浏览器中都有很好的支持: