将函数绑定到自定义条件

Bind function to custom condition

本文关键字：自定义 条件 绑定 函数      更新时间：2023-09-26

注意：我很少使用JS和jQuery，所以如果问题很奇怪，请原谅。

我正在尝试向我的页面（特别是菜单）添加一个div，但前提是页面小于特定宽度。基本上，我需要一个事件处理程序，它允许我等待满足该条件并在满足该条件后运行一个函数（类似于您使用on.（"点击"）），但我不知道如何做到这一点。

任何帮助将不胜感激！

看看

下面的代码：

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

我们监控窗口调整大小事件，并根据您的条件附加/删除div。

现场示例

使用小提琴的右下角（结果窗格）并调整其大小以查看会发生什么情况。

这没有事件处理程序，但您可以将其添加到 resize 事件处理程序中：

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