jquery - 在Jquery中调用公共插件方法时如何传递对象

Question

我正在构建一个 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 传递给公共方法。正如我所评论的，控制台仅输出“this”作为整个插件，而不是 $myPluginElement。像这样

function (options) {

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

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

我是不是想错了，我需要做些什么才能拥有将元素发送出去的公共方法？

谢谢！

Answer 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小提琴示例

Answer 2

似乎是一种奇怪的做事方式，我通常会这样做：

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

小提琴