如何让一个 jQuery 插件同时作用于多个元素？答案

【问题标题】：How to make a jQuery plugin work on multiple elements at the same time?如何让一个 jQuery 插件同时作用于多个元素？
【发布时间】：2012-11-30 14:57:49
【问题描述】：

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

$(elem).combobox(compensateElement);

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

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

插件会坏掉...

elem是要变成combobox的select，compareElement是插件可以在其后插入一个div的元素，div的长度是suggestsDiv-20px高。（我的页面上有一个没有被绝对定位元素向下推的页脚......）

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

我曾想过将所有特定于元素的变量放入 this.data “对象”中，但感觉根本不是一个好的解决方案。在对其运行了一些 RegEx 查找和替换并配置了几个小时后，我根本没有让它工作......

我可以使用哪些技术？

非常感谢您的宝贵时间！

【问题讨论】：

没有完全阅读整个问题，但是怎么样？ $('#state, #another-id, .a-class').combobox('form');（不确定最后的 'form' 是否正常。我不知道 'form' 是如何定位的）。
“使用多个元素”是什么意思？例如，您想执行$('select').combobox() 并将其应用于所有这些吗？
我的意思是能够将多个选择变成组合框。
@Jonas 是的，那很好，但问题是如果你尝试将它应用到多个元素上，这个插件就不再工作了..
@SérgioMichels 是的，有点。那太好了！但是，如果它应用于多个元素，则该插件将不再起作用。试试我提供给你的代码。

标签： javascript jquery jquery-plugins

【解决方案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 ));
            }
        });   
    }

这会为每个元素创建一个插件对象的新实例，因此您可以保持一致的状态。

【讨论】：

你，我的朋友，是个容易上当受骗的人！非常感谢你！我现在觉得自己特别傻！我知道问题出在哪里，但从来没有这么简单的解决方案！再次感谢！

【解决方案2】：

您可以使用 jQuery 的 each 函数在每个元素上调用您的插件方法。请记住，在您的方法中，关键字 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);
             }
        });
    };

【讨论】：

嗯，这段代码可以做到$('select').combobox('form'); 对吧？
是的...它将在每个节点上迭代并在其上调用插件方法:)
是的，但不幸的是这不是我的问题。也许我会更新这个问题。就是如果你做$('#1').combobox('form');$('#2').combobox('form');，插件就会坏掉。