Пользовательский плагин jQuery, сохраняйте заданные переменные, относящиеся к выбранному элементу?

Question

Это мой первый раз разрабатывающий плагин jQuery. В основном я просто пишу это, чтобы объединить функции вместе и сделать с помощью этих функций намного проще, что-то вроде написания класса с помощью методов.

У меня возникли проблемы с тем, что после того, как я использую команду jQuery для элемента - вся информация изнутри этой функции потеряна, и я не могу использовать ее для последующего использования. Я хотел бы использовать плагин как своего рода класс с функциями как методы. Я хочу сохранить созданные Рафаэлем объекты внутри него и, при необходимости, манипулировать ими позже. Вот мой пример:

(function($) { 
    $.fn.myPlugin = function(step) { 
     if(step == 'step1') { 
      var test = 'Function OK!'; 
      console.log(test); 
     } 
     if(step == 'step2') { 
      console.log(test); 
     } 
    } 
})(jQuery); 

$('#elem').myPlugin('step1'); 
$('#elem').myPlugin('step2'); 

Конечно, первый журнал консоли печатает переменную, однако вторая возвращает undefined.

Есть ли способ заставить jQuery действовать как самостоятельный класс с закрытыми переменными? Как я уже упоминал, я хочу создавать объекты Рафаэля, а затем манипулировать ими. Поэтому мне нужно назначить объект Raphael переменной (var graph = Raphael('#elem', options);), поэтому позже мне нужно было бы получить к ней доступ, вызвав функцию, например graph.somefunction(doThis);

Как это сделать? Я делаю что-то неправильно? Спасибо ..

Answer 1

Храните данные по каждому элементу.

$.fn.myPlugin = function(step){ 

    return this.each(function(){ 
     var $elem = $(this); 
     if(step == 'step1') { 
      $elem.data('test','Function OK!'); 
      console.log('step1',this.id,$elem.data('test')); 
     } 
     if(step == 'step2') { 
      console.log('step2',this.id,$elem.data('test')); 
     } 
    }); 

}; 

$('#elem').myPlugin('step1').myPlugin('step2'); 

Он также теперь поддерживает более одного элемента одновременно с разным шагом.

$('#elem1').myPlugin('step1'); 
$('#elem2').myPlugin('step1').myPlugin('step2'); 
$('#elem1').myPlugin('step2'); 

http://jsfiddle.net/FaaBV/