Jak sprawić, aby wtyczka jQuery działała na wielu elementach jednocześnie?

Question

Zrobiłem wtyczkę combobox. Aby z niego skorzystać, wystarczy zadzwonić

$(elem).combobox(compensateElement); 

EDIT: Problem jest, że jeśli zrobić

$('#1').combobox('form'); 
$('#2').combobox('form'); 

plugin złamie ...

elem to wybierz się przekształcony w combobox, a compensateElement jest elementem, po którym wtyczka może wstawić div, który jest długością sugestiiDiv-20px high. (Mam stopkę na mojej stronie, która nie jest wypychana przez elementy pozycjonowane absolutnie ...)

Problem polega na tym, że wtyczkę można używać TYLKO W JEDNYM ELEMENTU! Jak można go zmienić, aby działał jednocześnie na wielu elementach? To więcej niż sto linii kodu JS, więc nie oczekuję "skonwertowanego" kodu!

Myślałem o umieszczeniu wszystkich zmiennych elementarnych w "obiekcie" this.data, ale w ogóle nie wydawało mi się to dobrym rozwiązaniem. Po uruchomieniu jakiegoś RegEx znajdź & zamień go i skonfiguruj na kilka godzin, ale nie udało mi się go w ogóle uruchomić ...

Jakich technik mogę użyć?

Dziękuję bardzo za poświęcony czas!

Answer 1

Problemem jest to, że masz literal object, że będzie musiał zastąpić jego zawartość za każdym razem, kiedy zadzwonić m.init().

Sugeruję, aby spojrzeć na this post, która wyjaśnia dobre podejście do pisania wtyczek JQuery. Jeśli widzisz „Lekki Start”, na przykład:

$.fn[pluginName] = function (options) { 
     return this.each(function() { 
      if (!$.data(this, 'plugin_' + pluginName)) { 
       $.data(this, 'plugin_' + pluginName, 
       new Plugin(this, options)); 
      } 
     }); 
    } 

to tworzy nową instancję obiektu plugin dla każdego elementu, dzięki czemu można utrzymać stan konsekwentnie.

Answer 2

możesz wywoływać metody wtyczek na każdym elemencie z każdą funkcją jQuery. Zapamiętaj w swoich metodach słowo kluczowe this wskaże bieżący element, a nie obiekt jQuery.

$.fn.combobox = function(form) { 
     var $this = this; 

     return $this.each(function() { 
      if (!m.initialized) { 
       m.init.apply(this, [form]); 
       $this.data('initialized', true); 
      } else { 
       m.updateList.apply(this); 
      } 
     }); 
    };