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

Question

I am using the enquire.js library to add JavaScript media queries into a site I am developing.

The issue happens when I initially load the website.

1. I resize into the 860px breakpoint, and toggle the nav. All works fine and as expected.
2. Then I resize past 860px.
3. And once again I resize back into the 860px enquire.js media query. The toggle nav outputs both console messages.

Any ideas?

   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时，都会添加一个新 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');
    },

});

---

旁注：我删除()了nav_wrapper.if((nav_wrapper).hasClass('hide'))