基於瀏覽器寬度來終止或執行JavaScript

Question

簡而言之，我只想在瀏覽器窗口小於特定大小時才運行腳本（在這種情況下爲Flexslider）。

即

不到 480像素寬（或者在啓動或調整大小） - 運行Flexslider

超過 480像素寬（或者在啓動或調整大小） - 殺死Flexslider和顯示列表項目作爲'靜態'塊/頁面元素

目前，我有以下代碼，它通過使用基於瀏覽器寬度的addClass和removeClass工作（在某種程度上）。但是它需要刷新瀏覽器才能在相關的地方殺死或執行腳本。正如你可能猜到的那樣，我不是JS專家，但是我很想聽聽你的想法。

HTML：

<div id="foo"> 
     <ul class="slides"> 
     <li><img src="images/image1.jpg" width="320" height="320" alt=""></li> 
     <li><img src="images/image2.jpg" width="320" height="320" alt=""></li> 
     <li><img src="images/image3.jpg" width="320" height="320" alt=""></li> 
     </ul> 
    </div> 

JS：

 
     $(document).ready(function() { 
      var pageWidth = $(window).width(); 
      if (pageWidth <= 480) { 
       $("#foo").addClass('flexslider'); 
        $('.flexslider').flexslider({ 
         animation: "slide", 
         directionNav: true 
        }); 
      } 
     $(window).resize(function() { 
      if ($(window).width() > 480) { 
       $("#foo").removeClass('flexslider'); 
      } 
      }); 
     }); 
    

---

JS - 修訂版1

 $(window).resize(function(){ 
     var windowWidth = $(window).width(); 
     if (windowWidth <= 480) { 
      $("#foo").addClass('flexslider'); 
       $('.flexslider').flexslider({ 
        animation: "slide", 
        directionNav: true 
       }); 
     } 
    $(window).resize(function() { 
     if ($(window).width() > 480) { 
      $("#foo").removeClass('flexslider'); 
     } 
     }); 
    }); 

個

---

JS - 第2次修訂

$(window).resize(function() { 
     if ($(window).width() >= 480) { 
      $("#foo").removeClass('flexslider'); 
     } 
     if ($(window).width() < 480) { 
      $("#foo").addClass('flexslider'); 
      $('#foo').flexslider({animation: "slide"}); 
     } 
}); 

Answer 1

採取

$(window).resize(function() { 
     if ($(window).width() >= 480) { 
      $("#foo").removeClass('flexslider'); 
     } 
     if ($(window).width() < 480) { 
      $("#foo").addClass('flexslider'); 
     } 
    }); 

出$(document).ready功能。

發生了什麼是document.ready僅在頁面加載時觸發。如果您希望window.ready函數在頁面大小調整後觸發，則必須將其從文檔中取出。ready函數

此外，您還需要在兩個函數中執行相同的操作。或者有一個單獨的功能來處理添加和刪除彈性滑塊並且調用該函數window.resize和document.ready。第二種方式可能更好。

希望有所幫助。