5

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

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

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

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

我实际上在这里尝试做的真实世界场景是我有一个包含 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 的了解以用于其他事情。

谢谢。

编辑：我忘了提...如果您将页面加载到 500 像素以下，然后调整大小或将其定向更宽然后 500 像素，然后在 500 像素以下返回，点击功能将无法再次工作..这也让我感到困惑。我基本上希望它在低于 500 像素时无论如何都能工作，而在超过 500 像素时根本不起作用。

4

1 回答 1

8

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

基本上，您想在匹配时添加事件处理程序并在不匹配时删除事件处理程序。您似乎掌握了如何在上面执行此操作的要点，但是您的语法有点错误。一旦语法得到纠正，删除点击处理程序只是一些 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/

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

于 2012-10-27T12:17:44.540 回答