2

シンプルな jquery プラグイン内で関数を呼び出そうとしています。init メソッドは幅に 30 を追加しますが、 add50 メソッドは error をスローしますUncaught TypeError: Object [object Object] has no method 'add50'。このエラーが発生する原因がわかりません。

jsfiddle: http://jsfiddle.net/nsshrinivasan/KnDMq/6/

;(function ( $, window, document, undefined ) {

    // Create the defaults once
    var pluginName = 'Extender',
        defaults = {
            propertyName: "value"
        };

    // The actual plugin constructor
    function Plugin( element, options ) {
        this.element = element;
        this.options = $.extend( {}, defaults, options) ;
        this._defaults = defaults;
        this._name = pluginName;
        this.init(this.element);
    }

    Plugin.prototype = {
        init : function (element) {
           // console.log($(this.element).width());
           $(element).width($(element).width() + 30);
        },
        add50 : function(element){
           $(element).width($(element).width() + 50);
        }

     };

    $.fn[pluginName] = function ( options ) {
        return this.each(function () {
            if (!$.data(this, 'plugin_' + pluginName)) {
                $.data(this, 'plugin_' + pluginName,
                new Plugin( this, options ));
            }
        });
    }

})( jQuery, window, document );

$('#metal').Extender().add50();

HTML:

<div id='metal'></div>

CSS:

#metal{
    width: 50px;
    height: 10px;
    background:red;
}
4

2 に答える 2

1

私はあなたのフィドルを更新しました:フィドル

;(function ( $, window, document, undefined ) {

    // Create the defaults once
    var pluginName = 'Extender',
        defaults = {
            propertyName: "value"
        };

    // The actual plugin constructor
    function Plugin( element, options ) {
        this.element = element;
        this.options = $.extend( {}, defaults, options) ;
        this._defaults = defaults;
        this._name = pluginName;
        this.init();
    }

    Plugin.prototype = {
        init : function () {
           // console.log($(this.element).width());
           $(this.element).width($(this.element).width() + 30);
        },
        add50 : function(){
           $(this.element).width($(this.element).width() + 50);
        }

     };

    $.fn[pluginName] = function ( options ) {
        return $.data(this, 'plugin_' + pluginName, new Plugin( this, options ));
    }

})( jQuery, window, document );

$('#metal').Extender().add50();
于 2012-12-29T05:25:44.713 に答える
1

次のようなものを追加してみてください。

function Plugin( element, options ) {
    this.element = element;
    this.options = $.extend( {}, defaults, options) ;
    this._defaults = defaults;
    this._name = pluginName;
    if (this[options]){
        this[options](this.element);
    } else {
        this.init(this.element);
    }
}

次に、すべてのプラグインを次のよう$('#metal').Extender('add50');にして、メソッドをオプションとして渡します。 jsFiddle の更新

于 2012-12-29T05:12:51.090 に答える