Question

我正在尝试将我编写的一些代码转换为简洁的jQuery插件，以便可以更重用。我对编写自定义jQuery插件很陌生，所以我现在只是感觉自己正在经历它。

该特定功能旨在与Leaflet（类似于Google Maps的网络地图库）配合使用。我做的第一件事是附加一个mousemove事件监听器。在Leaflet中，是这样完成的：

// Initialize map
map = L.map('map');

map.addEventListener('mousemove', function(ev) {
    console.log(ev);
    // Do some event handling here
});

很自然，我要我的插件做的第一件事就是将这个完全相同的事件侦听器附加到地图上。因此，我从基于this guide的以下代码开始：

(function ( $ ) {
    $.fn.spotlight = function() {
        console.log(this);
        this.addEventListener('mousemove', function(ev) {});
    };
}( jQuery ));

然后我在主脚本中这样称呼它：

map = L.map('map');
$(map).spotlight();

但是，这将引发错误，指示this.addEventlListener is not a function和前面的console.log语句表明实际上已传递的是包含地图对象的对象的一元素长列表。因此，此代码有效：

(function ( $ ) {
    $.fn.spotlight = function() {
        console.log(this[0]);
        this[0].addEventListener('mousemove', function(ev) {});
    };
}( jQuery ));

我看到指南中可以使用each()函数来完成某些工作，但是我想不出一种方法来对该列表中的每个元素调用addEventListener()函数，甚至不是我应该做的。

我在应该使用jquery函数的方式上犯了一个错误吗？从技术上讲这是可行的，但我想知道正确的方法。

定义jQuery插件时必须引用“ this [0]”而不是“ this”

0 个答案: