jQuery If/Else statement, чтобы проверить, имеет ли элемент класс, оба результата?

Question

Я использую библиотеку enquire.js, чтобы добавить запросы к мультимедийным запросам JavaScript на сайт, который я разрабатываю.

Проблема возникает, когда я изначально загружаю веб-сайт.

1. Я изменяю размер в точке останова 860px и переключаю навигатор. Все работает отлично и, как ожидалось.
2. Затем я изменяю размер за прошлый 860px.
3. И снова я изменяю размер в запросе на медиа-запрос 860px enquire.js. Переключатель nav выводит оба консольных сообщения.

Любые идеи?

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')).