小于750px的视口上的jQuery更改类

我有一个类，当你们在移动设备上，在比700px小的视窗上观看时，我想把这个类改成。二

这怎么可能，谢谢？

您可以使用：

$( window ).resize(function() {
 if ($(window).width() <= 700)
  $('.one').addClass('two').removeClass('one')
 else
  $('.two').addClass('one').removeClass('two')
}).trigger('resize');

$（窗口）。调整大小（函数（）{
if（$（window）.width（）我认为您试图解决的问题是错误的。仅仅因为您的视口发生了变化，这是否意味着该类应用到的项正在发生变化

相反，更简洁的方法是使用相同的类（毕竟，这是一种描述内容的方法）和
@media
查询来设置样式：

.myClass {
    font-weight: bold;
    font-size: 1.2em;
}

@media (max-width: 750px) {
    .myClass {
       font-size: 1.0em;
    }
}

有关更多详细信息，请参阅。
简单：

if ($(window).width() < 700) {
   $( "parentelement" ).removeClass( "one" ).addClass( "two" );
}

if（$（窗口）.width（）<700）{
$（“parentelement”）.removeClass（“一”）.addClass（“二”）；
}

我相信你甚至可以做到：

 if ($(window).width() < 700) {
       $( "body" ).removeClass( "one" ).addClass( "two" );
    }

if（$（窗口）.width（）<700）{
$（“正文”）.removeClass（“一”）.addClass（“二”）；
}

将所有“一”类替换为“二”类

为了确保在用户调整浏览器窗口大小时它能正常工作，我还将其放在一个调整窗口大小的窗口中，即：

 $(window).resize(function() {
       if ($(window).width() < 700) {
               $( "body" ).removeClass( "one" ).addClass( "two" );
            }
    });

$（窗口）。调整大小（函数（）{
如果（$（窗口）.width（）<700）{
$（“正文”）.removeClass（“一”）.addClass（“二”）；
}
});

或者在启动时，您可以将其放在一个准备好的文档中：

$(document).ready(function() {
 if ($(window).width() < 700) {
               $( "body" ).removeClass( "one" ).addClass( "two" );
            }

});

$（文档）.ready（函数（）{
如果（$（窗口）.width（）<700）{
$（“正文”）.removeClass（“一”）.addClass（“二”）；
}
});
您可以使用“调整大小”事件：

$（窗口）。调整大小（函数（）{
如果（$（窗口）.width（）<700）{
$（'.one'）.addClass（'two'）.removeClass（'one'）；
}否则{
$（'.two'）.addClass（'one'）.removeClass（'two'）；
}
});
获取浏览器的大小，并相应地更改类。保留当前状态的变量，以便仅在状态更改时更改类

例如，更改body元素上的类：

$(function(){

  setSize();
  $(window).resize(setSize);

  var isMobile = false;

  function setSize() {
    var w = $(window).width();
    if (w < 700 && !isMobile) {
      isMobile = true;
      $('body').removeClass('one').addClass('two');
    } else if (w >= 700 && isMobile) {
      isMobile = false;
      $('body').removeClass('two').addClass('one');
    }
  }

});

$（函数（）{
设置大小（）；
$（窗口）。调整大小（设置大小）；
var isMobile=false；
函数setSize（）{
var w=$（window.width（）；
if（w<700&！isMobile）{
isMobile=true；
$（'body'）.removeClass（'one'）.addClass（'two'）；
}如果（w>=700&&isMobile），则为else{
isMobile=false；
$（'body'）.removeClass（'two'）.addClass（'one'）；
}
}
});
谢谢！我知道这一点，原因是要用jQuery来创建另一个样式规则，而不重写第一个。@user2361475然后将第一个样式规则包装在
最小宽度：751px

query中。嗨，谢谢！这很简单、快速、完美，效果很好！谢谢！还有一件事，那就是pos如果可以解决“刷新”问题，我需要刷新页面以更改该类？谢谢！

$(function(){

  setSize();
  $(window).resize(setSize);

  var isMobile = false;

  function setSize() {
    var w = $(window).width();
    if (w < 700 && !isMobile) {
      isMobile = true;
      $('body').removeClass('one').addClass('two');
    } else if (w >= 700 && isMobile) {
      isMobile = false;
      $('body').removeClass('two').addClass('one');
    }
  }

});