Question

我制作了一个组合框插件。要使用它，您只需致电

$(elem).combobox(compensateElement);

编辑：问题是，如果你这样做

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

插件会破坏......

elem是要转换为组合框的选项，而compensationElement是一个元素，在该元素之后插件可以插入一个div，该div是suggestDiv-20px high的长度。（我的页面上有一个页脚，没有被绝对定位的元素压下......）

现在，问题是这个插件只能在一个元素上使用！如何更改它以便它可以同时处理多个元素？这是超过一百行的JS代码，所以我不指望“转换”代码！

我曾考虑将所有特定于元素的变量放入this.data“对象”中，但它根本不是一个好的解决方案。运行一些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);
             }
        });
    };

如何让jQuery插件同时处理多个元素？

2 个答案: