jQuery If/Else 语句，检查元素是否有 class 产生两个结果？

Question

我正在使用 enquire.js 库将 JavaScript 媒体查询添加到我正在开发的网站中。

问题发生在我最初加载网站时。

我调整到 860px 断点，并切换导航。一切正常，符合预期。
然后我将尺寸调整到 860px 以上。
我再次调整回 860px enquire.js 媒体查询。切换导航输出两个控制台消息。

有什么想法吗？

   enquire.register("screen and (max-width:860px)", {

        match : function()
        {   
            nav_wrapper.removeClass('show').addClass('hide');

            nav_toggle.click(function()
            {
                if((nav_wrapper).hasClass('hide'))
                {
                    console.log('It\'s hidden');
                    nav_wrapper.removeClass('hide').addClass('show');
                }
                else
                {
                    console.log('It\'s opened up');
                    nav_wrapper.removeClass('show').addClass('hide');
                }

            });

        },

        unmatch : function()
        {
            nav_wrapper.removeClass('hide').addClass('show');
        },

    });

Answer 1

每次调用 match 时，您都会添加一个 new click 处理程序（通过再次执行 nav_toggle.click(function(){ ... })）。他们堆叠起来，他们每个人都会被跟注。因此，在第一次调用 match 之后，您有一个并且可能会得到您期望的行为。在第二次调用 match 之后，您有两个，并开始出现错误行为。在第三次调用 match 之后，您将有三个...

看看你的 click 处理程序，没有理由这样做，只需将其连接一次（大概在 match 之外）。

例如：

// Hook up click **once**
nav_toggle.click(function() {
    if (nav_wrapper.hasClass('hide')) {
        console.log('It\'s hidden bud');
        nav_wrapper.removeClass('hide').addClass('show');
    } else {
        console.log('It\'s opedn up mate');
        nav_wrapper.removeClass('show').addClass('hide');
    }

});

// Respond to screen width changes
enquire.register("screen and (max-width:860px)", {

    match: function() {
        nav_wrapper.removeClass('show').addClass('hide');
    },

    unmatch: function() {
        nav_wrapper.removeClass('hide').addClass('show');
    },

});

旁注：我删除了 if((nav_wrapper).hasClass('hide')) 中 nav_wrapper 周围不必要的 ()。

jQuery If/Else 语句，检查元素是否有 class 产生两个结果？

jQuery If/Else statement, to check if element has class produces both results?

jquery

if-statement

responsive-design

enquire.js