javascript - 同一页面上有多个 JQuery 插件

Question

我想知道是否有一个简单的解决方案: 我在网格中定义的元素上多次创建了以下 JQuery 插件

(function ($) {
    $.fn.MyPlugin = function () {

        $(this).mouseenter(function () {
           //do something for single plugin instance
        });
    };

})(jQuery);

但是，我如何才能唯一地识别我正在触发鼠标输入功能的插件实例。在当前设置中，我引用了所有实例，但我只想同时触发其中一个实例的 mouseenter。

插件的创建方式如下:

$(".someClass").MyPlugin(); 

Answer 1

您不需要多次创建插件，这就是它被称为插件的原因。您只需将其插入任何您想要的地方即可。看看jquery plugins authoring page关于如何开始编写插件。它提供了一些不错的模板。

在您的代码中 $(this) 是多余的，因为 this 已经是一个 jQuery 对象。然后，您需要始终返回此以保持插件的可链接性。您可以在 moousenter 事件中使用 $(this) 来引用 DOM 中插件正在处理的当前元素。

有时，返回 this.each() 并循环每个元素并执行某些操作也很有用。在这种情况下，由于您附加了一个事件，因此它没有帮助，因为事件适用于项目集合中的每个项目；在本例中，this 指的是您调用插件的集合:

$.fn.MyPlugin = function () {

    return this.mouseenter(function () {
       $(this).something();
       //do something for single plugin instance
    });

};

然后你可以像这样调用插件:

$('elements').MyPlugin();

只需在所需的元素上调用插件，这些元素就会附加 mouseenter 事件。