Question

我试图编写一个简单的jQuery插件，我需要一些代码在load和window resize上运行，所以我在插件中编写了一个函数。

jQuery（document）.ready（function（$）{

(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();

问题是这个＆＃39;似乎在功能中没有被识别出来。我尝试将其作为函数参数传递：

enable_responsive_nav( this )

...但是我在控制台上遇到错误，说hasClass（）＆＃39;不是函数＆＃39;。

我想我可以在没有该功能的情况下执行此操作，然后在插件外部绑定窗口调整大小事件，但我试图将其保持为单个调用，并且我确定我所做的事情＆＃39 ; m缺失很简单。

Answer 1

我尝试将其作为函数参数传递：
enable_responsive_nav( this )

让我们按照链接：

jQuery将使用引用该事件的 DOM元素（不是jQuery对象）的this来调用您的事件回调。所以你可以这样做：

enable_responsive_nav( $(this) );

...与

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

或者

enable_responsive_nav.call(this);

与

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

Answer 2

一个常见的解决方案是在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();

使用＆＃34;这个＆＃34;在jQuery插件中的命名函数内部

2 个答案: