javascript - 数字作为默认 jquery 插件选项

Question

我有一个小问题。我设置了一些 jquery 插件默认设置：

defaults = {
    insdElmnts: 'img',
    cursorDistance : 10
};
function plugin (options) {
    this.settings = $.extend({}, defaults, options);
}

我尝试使用cursorDistance这个：

_mark.css({
    left: 10 - this.settings.cursorDistance,
    top: 10 - this.settings.cursorDistance
});

但我有一些错误：无法读取未定义的属性'cursorDistance'。什么不对？我需要添加一些单位吗？谢谢帮助。

Answer 1

1）如果您开发 jquery 插件 - 它里面的“this”表示“jquery collection”。当你调用 $(".element_class").plugin(); - 在插件函数内部，这将等于 $(".element_class")。要访问集合的每个元素 - 您应该使用 .each()。

2）使用 .data() 方法将一些数据与 html 元素相关联。插件示例：

(function($){  
   var defaults = {
       insdElmnts: 'img',
       cursorDistance : 10
   };

   $.fn.pluginName= function(options) {
      //here "this" means "jquery collection"
      return this.each(function () {
          //here "this" means "html element"
          var el = $(this);    
          el.data("settings", $.extend({}, defaults, options));
          /** do here something that you need **/
      });  
   };
})(jQuery);

3）使用 .data 方法提取插件外的数据：

_mark.css({
    left: 10 - _mark.data("settings").cursorDistance,
    top: 10 - _mark.data("settings").cursorDistance
});

但最好尝试编写能够自行完成所有需要工作的优秀插件。