在一個頁面上我的jQuery插件的多個實例

Question

我正在使用jQuery UI模板編寫我的第一個jQuery插件，並試圖實例化同一插件的兩個實例 - 但具有不同的選項。

我可以做一些幫助，請！

的Javascript：

(function ($) { 
// ********************************** 
// ***** Start: Private Members ***** 
var pluginName = 'onFancyLinks', 
    version = '1.0'; 
// ***** Fin: Private Members ***** 
// ******************************** 

// ********************************* 
// ***** Start: Public Methods ***** 
var methods = { 
    init: function (options) { 
     //"this" is a jquery object on which this plugin has been invoked. 
     return this.each(function (index) { 
      var $this = $(this); 
      var data = $this.data(pluginName); 
      // If the plugin hasn't been initialized yet 
      if (!data) { 
       var settings = { 
        lineColor: '#fff', 
        lineWidth: 1, 
        wrapperClass: 'fancy-link', 
        linesClass: 'line', 
        transDuration: '0.7s' 
       }; 
       if (options) { 
        $.extend(true, settings, options); 
       } 

       $this.data(pluginName, { 
        target: $this, 
        settings: settings 
       }); 
      } 
     }); 
    }, 
    wrap: function() { 
     return this.each(function() { 
      var $this = $(this), 
       data = $this.data(pluginName), 
       opts = data.settings, 
       //wrapping div 
       wrapper = '<div class="' + opts.wrapperClass + '"></div>', 
       lines = { 
        top: '<div class="' + opts.linesClass + ' line-top">&nbsp;</div>', 
        right: '<div class="' + opts.linesClass + ' line-right">&nbsp;</div>', 
        bottom: '<div class="' + opts.linesClass + ' line-bottom">&nbsp;</div>', 
        left: '<div class="' + opts.linesClass + ' line-left">&nbsp;</div>' 
       }; 

      $this.wrap(wrapper); 
      $('.' + opts.wrapperClass).append(lines.top, lines.right, lines.bottom, lines.left); 

      //setup transition duration of lines animation 
      $('.' + opts.wrapperClass + ' .' + opts.linesClass).css({ 
       'transition-duration': opts.transDuration, 
       backgroundColor: opts.lineColor, 
       borderWidth: opts.lineWidth 
      }); 
     }); 
    } 
}; 
// ***** Fin: Public Methods ***** 
// ******************************* 

// ***************************** 
// ***** Start: Supervisor ***** 
$.fn[pluginName] = function (method) { 
    if (methods[method]) { 
     return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); 
    } else if (typeof method === 'object' || !method) { 
     return methods.init.apply(this, arguments); 
    } else { 
     $.error('Method ' + method + ' does not exist in jQuery.' + pluginName); 
    } 
}; 
// ***** Fin: Supervisor ***** 
// *************************** 
})(jQuery); 


$(function() { 

    var v1 = $('#flink2').onFancyLinks({ 
     lineColor: '#f00', 
     lineWidth: 2, 
     transDuration: '.4s' 
    }); 

    var v2 = $('#flink').onFancyLinks({ 
     lineColor: '#ff0', 
     lineWidth: 1, 
     transDuration: '.7s' 
    }); 


    v1.onFancyLinks('wrap'); 
    v2.onFancyLinks('wrap'); 

}); 

HTML：

<a id="flink2" href="http://www.google.co.uk">View Google</a> 
<a id="flink" href="http://www.visarc.co.uk">View Visarc Site</a> 

這裏是我的小提琴：http://jsfiddle.net/owennicol/xhuxk/14/

我敢肯定，這是一些簡單的我失蹤...

Answer 1

非常漂亮的插件，但它有一個微妙的邏輯錯誤。以下是關鍵部分patched version：

var $wrapper = $this.wrap(wrapper).parent(); 
$wrapper.append(lines.top, lines.right, lines.bottom, lines.left); 

//setup transition duration of lines animation 
$wrapper.find('.' + opts.linesClass).css({ 
    'transition-duration': opts.transDuration, 
    backgroundColor: opts.lineColor, 
    borderWidth: opts.lineWidth 
}); 

請參閱？您不再分別瀏覽整個DOM，分別爲$('.' + opts.wrapperClass)和$('.' + opts.wrapperClass + ' .' + opts.linesClass) - 但是隻能在爲特定jQuery元素（由插件處理）創建的包裝中掃描。

而這正是是錯誤的原始版本：即使options設定正確（這很容易檢查 - 只需添加console.log(options)到wrap方法），css是在整個DOM這些線元素應用。