Cách tạo plugin jQuery hoạt động trên nhiều phần tử cùng một lúc?

Question

Tôi đã tạo một plugin combobox. Để sử dụng nó, bạn chỉ cần gọi

$(elem).combobox(compensateElement); 

EDIT: Vấn đề ở đây là nếu bạn làm

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

plugin sẽ phá vỡ ...

Các elem là chọn được biến thành một combobox, và bù đắpElement là một yếu tố mà sau đó các plugin có thể chèn một div đó là chiều dài của các đề xuấtDiv-20px cao. (Tôi có một chân trang trên trang của tôi không bị đẩy xuống bởi các phần tử vị trí tuyệt đối ...)

Bây giờ, vấn đề là plugin này CHỈ CÓ THỂ ĐƯỢC SỬ DỤNG TRÊN MỘT ELEMENT! Làm thế nào nó có thể được thay đổi để nó có thể hoạt động trên nhiều phần tử cùng một lúc? Đó là hơn một trăm dòng mã JS, vì vậy tôi không mong đợi mã "đã chuyển đổi"!

Tôi đã nghĩ đến việc đưa tất cả các biến phần tử cụ thể vào đối tượng this.data này, nhưng nó hoàn toàn không giống như một giải pháp tốt. Sau khi chạy một số RegEx tìm thấy & thay thế trên nó và định cấu hình nó trong một vài giờ, tôi đã không làm cho nó hoạt động cả ...

Tôi có thể sử dụng các kỹ thuật nào?

Cảm ơn bạn rất nhiều vì đã dành thời gian!

Answer 1

Vấn đề là bạn có một literal object, mà sẽ có nội dung mình thay thế mỗi khi bạn gọi m.init().

Tôi đề nghị bạn xem this post, giải thích cách tiếp cận tốt để viết các plugin JQuery. Nếu bạn thấy "Bắt đầu có trọng lượng nhẹ", ví dụ:

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

điều này tạo ra một thể hiện mới của đối tượng plugin cho mỗi thành phần, do đó bạn có thể duy trì trạng thái nhất quán.

Answer 2

bạn có thể gọi các phương thức plugin của mình trên từng phần tử với từng chức năng của jQuery. Hãy nhớ bên trong các phương thức của bạn, từ khóa this sẽ trỏ đến phần tử hiện tại không phải đối tượng 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); 
      } 
     }); 
    };