Question

您好我使用w3school.com的css框架所以我需要更改一些类以更好地查看用户更改窗口宽度的时间，为此我使用jquery但不起作用，可以获得帮助请求和谢谢她是代码来源。

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
  <script http://googleads.g.doubleclick.net/pcs/click?xai=AKAOjsskoPaKjpYu8DK0oiP7OYYa9-A9I7CpjKFG67eM5bDqwk7ZV2TT-34qu4fCp92Y2TEIfbX8dj-6vPUezLZ60FPo9y2zGtNrl64NtBc_79RxtrJhBn26YWvvq1XiSZtWXfY-ML7nBmtrCTm02RWO8eiXGK-gctEOfZvzaFRQISYn4GlDgpkqNyEMUm6X6-eKP7xTMr4vzjmPShzKYVE_xNd-siI_3Pk_-2U6c3x5HZpHZGOg6Fo&sig=Cg0ArKJSzAR_3zib5yc4&adurl=http://www.w3schools.com/w3css/w3css_templates.asp&nm=2&nx=179&ny=48&mb=1src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
 var w = window.innerWidth;
 function resize(){
 if (w > 1366){
   $(".object").addClass("w3-quarter").removeClass("w3-half w3-third");
 } if else (w <= 1366 && w > 800){
   $(".object").addClass("w3-third").removeClass("w3-half w3-qurter");
 } else { $(".object").addClass("w3-half").removeClass("w3-third w3-qurter");
 }
 }
 $(document).ready(function(){
 resize();
 $(window).resize(resize);
 });

</script>
</head>
<body>

 <h1>Heading 1</h1>
 <h2>Heading 2</h2>

 <div class="object w3-qurter">
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
 </div>
 <div class="object w3-qurter">
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
  </div>
 <div class="object w3-qurter">
   <p>This is a paragraph.</p>
   <p>This is another paragraph.</p>
 </div>
 <div class="object w3-qurter">
   <p>This is a paragraph.</p>
   <p>This is another paragraph.</p>
 </div>


 </body>
 </html>

Answer 1

第一次加载脚本时，您只获取window.innerWidth。将变量w移动到resize函数内部，以便每次调用函数时进行检查：

  function resize(){
   //This will check width every time the resize function is called
   var w = window.innerWidth;
     if (w > 1366){
     $(".object").addClass("w3-quarter").removeClass("w3-half w3-third");
     } if else (w <= 1366 && w > 800){
     $(".object").addClass("w3-third").removeClass("w3-half w3-qurter");
     } else { $(".object").addClass("w3-half").removeClass("w3-third w3-qurter");
    }
   }

用jquery更改类

2 个答案: