Получить ссылку на объект плагина назад от элемента, на который применяется плагин

Question

Пожалуйста, рассмотрите следующий код. Здесь у меня есть JQuery плагин myPlugin с помощью которой я изменил пользовательский интерфейс #targetElement

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

Я создал кнопку, и добавил слушатель события нажмите на него

$('#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)); 

Thats плагин (пока) не может ссылаться, потому что он не прошел их сам к чему-либо.

но если изменить код плагина abbove к этому:

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

Offcourse, если плагин не инициализирован #targetElement, он будет возвращен как неопределенному

но если у вас есть инициализация #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>