jquery - 在 jquery 中选择特定的类

Question

我想知道一旦屏幕尺寸低于 1000px 使用 jquery，我将如何选择此类并将其更改为 span12

<div class="span4 minus65">

我在用

$(window).resize(function(){
    if($(this).outerWidth() < 1000){
        $('.span4 minus65').attr('class',"span12");
    }

});

但是当屏幕宽度低于 1000px 时没有任何变化

Answer 1

用于选择具有多个类的 div

$('.span4.minus65')

并替换所有类：

$('.span4.minus65').removeClass().addClass('span12');

或只更换一个班级

$('.span4.minus65').removeClass('span4').addClass('span12');

Answer 2

听起来你想使用addClassandremoveClass功能

例如

$(window).resize(function(){
    if($(this).outerWidth() < 1000){
        $('.span4 minus65').removeClass('span4').addClass('span12');
    }
});

Answer 3

如果你不能使用媒体查询，你应该使用“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 和所有其他现代浏览器中都有很好的支持：

http://caniuse.com/#search=media%20queries