Question

当屏幕尺寸小于x像素数量时，HTML应该是一个类，如果它大于小于x值，它应该得到一个不同的类等等。

我正在使用jQuery 2.2.1。

的JavaScript

$(document).on('resize, ready', function() {
 // Add class if screen size equals
 var $window = $(window),
 $html = $('html');

 function resize() {
    if ($window.width() < 768) {
      return $html.addClass('xs');
    }
    else if ($window.width() > 768 && $window.width() < 992) {
      return $html.addClass('sm');
    }
    else if ($window.width() > 992 && $window.width() < 1200) {
      return $html.addClass('md');
    }
    else if ($window.width() > 1200) {
      return $html.addClass('lg');
    }
    $html.removeClass('xs sm md lg');
  }
  $window.resize(resize).trigger('resize');
});

问题是，在页面加载时，它将获得正确的类，在调整浏览器大小时将添加正确的类，但它不会删除旧类。

http://jsbin.com/jusapucadi/edit?html,js,output

我正在使用此帖子中的代码： jquery, add/remove class when window width changes

Answer 1

在删除旧课程之前，您的代码无法正常工作。

通过在设置新类之前删除旧类来更改它。

$(document).on('resize, ready', function() {
 // Add class if screen size equals
 var $window = $(window),
 $html = $('html');

 function resize() {
    $html.removeClass('xs sm md lg');

    if ($window.width() < 768) {
      return $html.addClass('xs');
    }
    else if ($window.width() > 768 && $window.width() < 992) {
      return $html.addClass('sm');
    }
    else if ($window.width() > 992 && $window.width() < 1200) {
      return $html.addClass('md');
    }
    else if ($window.width() > 1200) {
      return $html.addClass('lg');
    }
  }
  $window.resize(resize).trigger('resize');
});

Answer 2

我认为您应该在方法的开头删除旧类并删除每个类：

function resize() {
  $html.removeClass('xs sm md lg');

    if ($window.width() < 768) {
      return $html.addClass('xs');
    }
    else if ($window.width() > 768 && $window.width() < 992) {
      return $html.addClass('sm');
    }
    else if ($window.width() > 992 && $window.width() < 1200) {
      return $html.addClass('md');
    }
    else if ($window.width() > 1200) {
      return $html.addClass('lg');
    }

  }

或者您可以将类属性设置为＆＃34;＆＃34;

$html.attr("class","");

Answer 3

使用jquery .attr，它会自动从Jquery

中删除其他类

要用另一个类替换所有现有类，我们可以使用.attr（“class”，“newClass”）代替。

$(document).on('resize, ready', function() {
      // Add class if screen size equals
      var $window = $(window),
          $html = $('html');

      function resize() {
        if ($window.width() < 768) {
          return $html.attr( "class","xs" );
        }
        else if ($window.width() > 768 && $window.width() < 992) {
          return $html.attr( "class", "sm" );
        }
        else if ($window.width() > 992 && $window.width() < 1200) {
          return $html.attr( "class", "md" );
        }
        else if ($window.width() > 1200) {
          return $html.attr( "class", "lg" );
        }
     
      }
      $window.resize(resize).trigger('resize');

    });

    .xs body {
       background:red;
     }
     .sm body {
       background:blue;
     }
     .md body {
       background:black;
     }
     .lg body {
       background:purple;
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>

 
</head>
<body>
  
</body>
</html>

updated jsbin

Answer 4

src="mywebsite.com/youtube/myvids"

根据屏幕大小将类添加到html

的JavaScript

4 个答案: