綁定函數到自定義條件

Question

注意：我很少使用JS和jQuery，所以如果問題很奇怪，請原諒。

我想添加一個div到我的頁面（特別是菜單），但只有當頁面小於一定的寬度。基本上我需要一個事件處理程序，它允許我等待該條件得到滿足並且一旦運行它就會運行一個函數（類似於你將如何處理（「點擊」）），但我不知道如何實現這一點。

任何幫助將不勝感激！

Answer 1

看看下面的代碼：

var $myDiv = $("<div class='myDiv'></div>"); 
$(window).resize(function() { 
    var windowWidth = $(this).width(); 
    if (windowWidth < 200) { 
     $("body").append($myDiv); 
    } else { 
     $myDiv.remove(); 
    } 
}); 

我們重點監測的窗口大小調整事件，並追加/刪除DIV按你的條件。

Live Example

玩的小提琴（結果窗格）的底部右側，並調整其大小，看看會發生什麼。

Answer 2

這是沒有的事件處理程序，但你可以在resize事件處理程序添加它：

if (window.matchMedia("(min-width:700px)").matches) { 
// viewport width is at least 700px 
} else { 
// viewport is smaller than 700px 
}