Come far funzionare un plugin jQuery su più elementi contemporaneamente?

Question

Ho creato un plug-in di combobox. Per usarlo, basta chiamare

$(elem).combobox(compensateElement); 

EDIT: Il problema è che se si fa

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

il plugin si romperà ...

L'elem è la selezione per essere trasformato in una combobox e il compensateElement è un elemento dopo il quale il plugin può inserire un div che è la lunghezza dei suggerimentiDiv-20px high. (Ho un piè di pagina sulla mia pagina che non viene premuto da elementi posizionati in assoluto ...)

Ora, il problema è che questo plugin può ESSERE UTILIZZATO SOLO SU UN ELEMENTO! Come può essere modificato in modo che possa lavorare su più elementi contemporaneamente? Sono oltre un centinaio di righe di codice JS, quindi non mi aspetto il codice "convertito"!

Ho pensato di inserire tutte le variabili specifiche degli elementi nell'oggetto "oggetto" this.data, ma non mi sembrava affatto una buona soluzione. Dopo aver eseguito alcune RegEx, trovare & sostituirlo e configurarlo per un paio d'ore, non è riuscito a farlo funzionare ...

Quali tecniche è possibile utilizzare?

Grazie mille per il vostro tempo!

Answer 1

Il problema è che si dispone di un literal object, che avrà il suo contenuto sostituito ogni volta che si chiama m.init().

Ti suggerisco di guardare this post, che spiega i buoni approcci per scrivere i plugin JQuery. Se si vede la "Start leggero", per esempio:

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

questo crea una nuova istanza dell'oggetto plug-in per ogni elemento, in modo da poter mantenere lo stato coerente.

Answer 2

puoi chiamare i tuoi metodi plugin su ogni elemento con ogni funzione di jQuery. Ricorda nei tuoi metodi che la parola chiave this punterà all'elemento corrente non all'oggetto 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); 
      } 
     }); 
    };