Question

我有班级.one，当你在移动设备上查看时，在比700px更小的视口上，我希望将该类更改为.two？

这怎么可能，谢谢？

Answer 1

您可以使用“调整大小”事件：

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

Answer 2

我认为你正试图解决错误的问题。仅仅因为您的视口发生了变化，这是否意味着应用该类的项目正在发生变化？

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

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

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

有关详细信息，请参阅MDN。

Answer 3

您可以使用：

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

Answer 4

简单：

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

我确定你甚至可以做到：

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

使所有＆＃34;一个＆＃34;班级替换为班级＆＃34;两个＆＃34;

为了确保在用户调整浏览器窗口大小时它可以正常工作，我还会把它放在窗口大小调整大小，即：

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

或者只是在启动时将它包含在准备好的文档中：

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

});

Answer 5

获取浏览器的大小，并相应地更改类。使用当前状态保留变量，以便仅在状态更改时更改类。

例如，更改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');
    }
  }

});

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

5 个答案: