Question

这可能是大多数阅读的基础，但我似乎无法弄明白。

我有一个小测试功能，如果在一定宽度下我想执行。当屏幕旋转或调整大小超过该宽度时，我希望该功能停止工作。为简单起见，这是一些示例代码。

enquire.register("screen and (max-width:500px)",{
    match : function() {
        $(".block .block-title").click(function(){
            alert("Hello World!");
        });
    }
}).listen();

因此，如果页面加载超过500px，则按预期工作。单击将不会执行。如果页面加载为500px或更低，则执行单击功能。唯一的问题是，如果您调整视口大小或将方向更改为500px以上的值，则该函数仍会执行。我希望能够禁用它。

我实际上在这里尝试做的真实场景是我有一个无序的4个项目列表。超过一定宽度，它们会立即显示。如果在一定宽度下，我只想隐藏它们并点击显示它们。我知道有几种方法可以做到（.toggle（）,. toggleClass（“myclass”）等）。

我已经完成了很多次这样的事情，但我总是被进入/退出的断点和未被重置的事情或按预期工作所困扰。通常它没关系，但最近在我的一些用例中它很重要。

我知道unmatch选项，但我不确定如何真正杀死上面的匹配函数。

enquire.register("screen and (max-width:500px)",{
    match : function() {
        $(".block .block-title").click(function(){
            alert("Hello World!");
        });
    },
    {
        unmatch : function() {
        // what do I do here do kill above?
        }
    }
}).listen();

任何帮助将不胜感激。我很确定它会帮助我目前的情况，但也会帮助我扩展我对enquire.js的了解。

感谢。

编辑：我忘了提...如果你加载500px以下的页面，然后调整大小或定向宽度然后500px，然后在500px下返回，点击功能将不再工作..这也让我感到困惑。我基本上希望它能在500px以下的情况下工作，并且在500px以上时根本不工作。

Answer 1

我是enquire.js的作者，希望我能帮助你; - ）

基本上，您希望在匹配时添加事件处理程序并在unmatch上删除事件处理程序。你好像有如何做到这一点的要点，但你的语法有点错误。一旦语法得到纠正，只需要一些jQuery知识就可以删除点击处理程序。

那么让我们看一下语法应该如何：

enquire.register("screen and (max-width:500px)", {
    match: function() {
        //match code here
    },

    unmatch: function() {
        //unmatch code here
    }
}).listen();

请注意，match和unmatch是提供给register的单个对象的一部分。

理想情况下，您应将此文件放入文档准备回调中。要分配您的点击处理程序，请使用jQuery的on方法，因为这允许您使用off方法取消分配：

$(".block .block-title").on("click", function() {
    alert("hello");
});

$(".block .block-title").off("click");

这很棒，因为您甚至可以为事件命名空间，请阅读jQuery文档以获取更多详细信息。所以总而言之，我们会有这个：

$(document).ready(function() {

    var $target = $(".block .block-title");

    enquire.register("screen and (max-width:500px)", {
        match: function() {
            $target.on("click", function() {
                alert("Hello World!");
            });
        },
        unmatch: function() {
            $target.off("click");
        }
    }).listen();
});

您可以在此处找到一个有效的示例：http://jsfiddle.net/WickyNilliams/EHKQj/

那应该就是你需要的全部:)希望有所帮助！

使用enquire.js退出匹配的断点时销毁函数

1 个答案: