1

内部にいくつかのパブリックメソッドを持つjQueryプラグインを構築しています。これが今の様子です。

(function ($) {
    $.fn.ajDialogue = function (options) {

        var opts = $.extend({}, $.fn.ajDialogue.defaults, options);

        return this.each(function () {
            var $this = $(this);
            $.fn.ajDialogue.show();
        });

    };

    $.fn.ajDialogue.show = function () {
        // code
    };

    $.fn.ajDialogue.destroy = function () {
        console.log(this);
        // 'this' is this plugin
    };

    $.fn.ajDialogue.defaults = {
        width: 100,
        height: 100,
        onShow: function () { },
        onDestroy: function () { }
    };


})(jQuery);

このようにプラグインを宣言して実行していますが、これは正常に動作します。

var $myPluginElement = $('body').ajDialogue();

しかし、私がこれを行うとき

$myPluginElement.ajDialogue.destroy();

$myPluginElement が public メソッドに渡されません。コメントしたように、コンソールは $myPluginElement ではなく、プラグイン全体として「this」のみを出力します。このような

function (options) {

        var opts = $.extend({}, $.fn.ajDialogue.defaults, options);

        return this.each(function () {
            var $this = $(this);
            $.fn.ajDialogue.show();
        });
}

私は間違って考えていますか?要素を送信するパブリックメソッドを使用できるようにするにはどうすればよいですか?

ありがとう！

4

2 に答える 2

1

物事を行う奇妙な方法のように思えますが、私は通常、次のようなことを行います:

(function ($) {
    $.fn.ajDialogue = function (options) {
        var defaults = {
                width: 100,
                height: 100,
                onShow: function () { },
                onDestroy: function () { }
            },
            self = this,
            opts = $.extend(defaults, options);

        this.show = function() {
            console.log(this);
        }
        this.destroy = function() {
            console.log('destroy');
        }

        return this.each(function () {
            self.show()
        });
    };
})(jQuery);

var $myPluginElement = $('body').ajDialogue();

$myPluginElement.show();

フィドル

于 2013-06-08T22:15:38.263 に答える
1

私はjQueryプラグインのプロなどではありません... とにかく、私はこのようなことをそのように実現します

<span id="test"></span>


(function ($) {
$.fn.ajDialogue = function (options) {

    var opts = $.extend({}, $.fn.ajDialogue.defaults, options);

    return this.each(function () {
        var $this = $(this);
        $.fn.ajDialogue.show();
    });

};

$.fn.ajDialogue.show = function () {
    // code
};

$.fn.ajDialogue.destroy = function (element) {
    alert(element);
    // 'this' is this plugin
};

$.fn.ajDialogue.defaults = {
    width: 100,
    height: 100,
    onShow: function () { },
    onDestroy: function () { }
};


})(jQuery);


$(window).ajDialogue.destroy($('#test'));

ここで動作するjsフィドルの例

于 2013-06-08T22:13:47.090 に答える