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

Question

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

的 ui

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

我创建了一个按钮并在上面添加了一个点击事件监听器

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

现在在按钮触发器上我想取回 myPlugin 对象。 我不想使用 myPluginVar。有什么方法可以使用应用了插件的元素来获取 myPlugin 的引用。

Answer 1

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

$.myPlugin = function(){} 将创建一个可以像这样静态调用的插件:$.myPlugin();。

因此，您所要做的就是在每次调用 $.fn.myPlugin 时设置 $.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>