Question

我一直在制作我的第一个小jQuery插件 - 我使用的是带有标准功能的javascript，但决定将其捆绑到一个带有一些选项的jquery插件。

这是我的jquery代码的缩小版本：

(function($) {

        $.fn.responsiveNav = function( options ) {

            // Establish our default settings
            var settings = $.extend({
                selector         : '.responsive-nav'
            }, options);

            $( " " + settings.selector + " ul li" ).has( "ul" ).each(function() {
                $(this).addClass('responsive-nav-dropdown');
            });
            $( ".responsive-nav-dropdown" ).click(function() {
                $("ul",this).toggle();
            });

        }

    }(jQuery));

然后我通过执行以下操作在文档中调用此函数：

$( document ).ready(function() {
    responsiveNav();
});

但这导致函数未定义错误。我猜这是某种范围问题，但我找不到任何可以帮助我纠正这个问题。

Answer 1

$.fn构造用于在jQuery对象上定义方法。因此，您需要使用这样的插件：

$('#myElement').responsiveNav();

或者你可以把它作为jQuery变量本身的一个方法：

$.responsiveNav = function( options ) { // note: no .fn
    // your code...
}

// to call it:
$.responsiveNav({ /* options */ });

Answer 2

(function($) {
   ///

    })(jQuery);

而不是

(function($) {
   ///

    }(jQuery));

另一件事：不要在设置中传递选择器。如果是这样，jQuery的用途是什么。

插件中的Jquery对象是this：

.each(function(i,e) {}) 
// known that e is the current element in your loop
    $.fn.responsiveNav = function( options ) {
        var this=that; 
        var settings = $.extend({selector: '.responsive-nav'}, options);
    $(that).has( "ul" ).each(function(i,e) {
        $(e).addClass('responsive-nav-dropdown');
    });
    $( ".responsive-nav-dropdown" ).click(function() {
        $("ul",this).toggle();
    });
}

Answer 3

您需要将其称为：

$("selector").responsiveNav();

jQuery $ .fn。功能未定义

3 个答案: