Question

请考虑以下代码。在这里，我有一个jquery插件myPlugin使用我更改了#targetElement

的ui

var myPluginVar = $('#targetElement').myPlugin();

我创建了一个按钮并在其上添加了一个click事件监听器

$('#myButton').click(function(){
    // HERE I want reference of myPlugin back.
}

现在在按钮触发器上我想要回到myPlugin对象。我不想使用myPluginVar。有没有办法使用应用了插件的元素来引用myPlugin。

Answer 1

这取决于你如何编写插件。

遵循这个基本插件示例：

(function($){
    $.fn.myPlugin = function(){
        return this.text('Iam is myPlugin');
    };
}(jQuery));

那个插件（尚未）被引用，因为它没有将自己传递给任何东西。

但如果更改插件代码，请执行以下操作：

(function($){
    $.myPlugin = function(el){
        $(el).data('myPlugin', this);
        return $(el).text('Iam is myPlugin');
    };
    $.fn.myPlugin = function(){
        return new $.myPlugin(this);
    };
}(jQuery));

你可以用以下方式调用插件自我引用：

$('#targetElement').data('myPlugin');

如果插件永远不会在#targetElement上初始化，那么它将返回 undefined

但如果您已初始化#targetElement，则使用：

$('#targetElement').myPlugin();

它将返回 $ .myPlugin 对象

Answer 2

$.fn.myPlugin = function(){}会创建一个可以在这样的元素上调用的插件：$("#example").myPlugin();，如您所知。

$.myPlugin = function(){}会创建一个可以静态调用的插件：$.myPlugin();。

因此，每次调用$.myPlugin时，您所要做的就是设置$.fn.myPlugin，因此它将引用最后使用的元素。

$.fn.myPlugin = function(){
  this.text("Hello, world!");
  
  var t = this;
  
  $.myPlugin = function() {
    return t;
  }
};

$("#test").myPlugin();

$("#button").click(function(){
  $.myPlugin().text("something else");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
</div>
<button id="button">Click Me</button>

从应用插件的元素获取插件对象引用

2 个答案: