एक ही समय में एक से अधिक तत्वों पर एक jQuery प्लगइन काम कैसे करें?

Question

मैं एक combobox-प्लगइन कर दिया है। इसका इस्तेमाल करने के लिए, तुम सिर्फ कॉल करनी होगी

$(elem).combobox(compensateElement); 

संपादित करें: समस्या है कि ELEM होने के लिए चयन है अगर आप

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

प्लगइन टूट जाएगा ...

करना है एक combobox में बदल गया है, और compensateElement एक तत्व जिसके बाद प्लगइन एक div suggestionsDiv-20px उच्च की लंबाई है कि सम्मिलित कर सकते हैं है। (मेरे पास मेरे पृष्ठ पर एक पाद लेख है जो पूर्ण स्थानित तत्वों द्वारा नहीं दबाया जाता है ...)

अब समस्या यह है कि इस प्लगइन का उपयोग केवल एक तत्व पर किया जा सकता है! इसे कैसे बदला जा सकता है ताकि यह एक साथ कई तत्वों पर काम कर सके? यह जेएस-कोड की सौ से अधिक पंक्तियां है, इसलिए मुझे "रूपांतरित" कोड की उम्मीद नहीं है!

मैंने इस तत्व को "ऑब्जेक्ट" में सभी तत्व-विशिष्ट चर डालने का विचार किया है, लेकिन यह एक अच्छा समाधान की तरह महसूस नहीं करता था। कुछ RegEx को चलाने के बाद & इसे प्रतिस्थापित करें और इसे कुछ घंटों तक कॉन्फ़िगर करें, मुझे यह बिल्कुल काम नहीं मिला ...

मैं किस तकनीक का उपयोग कर सकता हूं?

आप अपने समय के लिए बहुत बहुत धन्यवाद!

Answer 1

समस्या यह है कि आप एक literal object है, कि उसकी सामग्री हर बार जब आप m.init() फोन प्रतिस्थापित करना होगा।

मैं आपको this post पर देखने का सुझाव देता हूं, जो JQuery प्लगइन्स लिखने के लिए अच्छे दृष्टिकोण बताता है।

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

इस प्रत्येक तत्व के लिए प्लगइन वस्तु का एक नया उदाहरण बनाता है, इसलिए आप राज्य लगातार बनाए रख सकते हैं: यदि आप "हल्के प्रारंभ", उदाहरण के लिए देखें।

Answer 2

आप jQuery के प्रत्येक कार्य के साथ प्रत्येक तत्व पर अपने प्लगइन तरीकों कॉल कर सकते हैं। अपने तरीकों के अंदर याद रखें कीवर्ड this वर्तमान तत्व को इंगित करेगा कि 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); 
      } 
     }); 
    };