Использование «this» внутри именованной функции в плагине jQuery

Question

Я пытаюсь написать простой плагин jQuery, и мне нужен некоторый код для работы как при изменении нагрузки, так и в окне, поэтому я написал функцию внутри плагина.

JQuery (документ) .ready (функция ($) {

(function($) { 

    $.fn.responsiveNav = function() { 

     function enable_responsive_nav() { 

      if(this.hasClass('class')) { 
       //do stuff 
      } 

     } 

     $(window).resize(function(e) { 
      enable_responsive_nav(); 
     }); 
     enable_responsive_nav(); 

     return this; 

    }; 

}(jQuery)); 

$('nav').responsiveNav(); 

Проблема в том, «это», кажется, не признается в функции Я попытался передать его в качестве аргумента функции:.

enable_responsive_nav(this) 

... но потом я получаю сообщение об ошибке на консоли, говоря hasClass() 'не является функцией.

Я предполагаю, что я мог бы сделать это без функции и затем связать окно изменения размера событие вне плагин, но я пытаюсь сохранить это для одного вызова, и я уверен, что то, что мне не хватает, очень просто.

Answer 1

Одно общее решение заключается в создании локальной переменной с именем that или self в объеме, где this имеет ожидаемое значение, а затем ссылаться на локальную переменную в сферу внутренней функции:

(function($) { 

    $.fn.responsiveNav = function() { 
     var self = this; // local variable 
     function enable_responsive_nav() { 

      if(self.hasClass('class')) { // self is in scope 
       //do stuff 
      } 

     } 

     $(window).resize(function(e) { 
      enable_responsive_nav(); 
     }); 
     enable_responsive_nav(); 

     return this; 

    }; 

}(jQuery)); 

$('nav').responsiveNav(); 

Answer 2

Я попытался передать его в качестве аргумента функции:

enable_responsive_nav(this) 

Давайте проследим цепь через:

JQuery будет вызывать функцию обратного вызова события с this ссылки на DOM элемент (не jQuery), что событие было подключено. Таким образом, вы можете сделать это:

enable_responsive_nav($(this)); 

... с

if(arg.hasClass('class')) { 
    //do stuff 
} 

Или

enable_responsive_nav.call(this); 

с

if($(this).hasClass('class')) { 
    //do stuff 
}