一页上我的 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
});

看到了吗？您不再分别查看 $('.' + opts.wrapperClass) 和 $('.' + opts.wrapperClass + ' .' + opts.linesClass) 的整个 DOM - 而是仅在为特定 jQuery 元素（由插件处理）创建的包装器内进行扫描。

这正是原始版本中的错误：即使 options 设置正确（这很容易检查 - 只需将 console.log(options) 添加到 wrap 方法中），css 仍应用于整个这些线条元素的 DOM。