Javascript 我的jQuery插件在一个页面上的多个实例

我正在使用jQueryUI模板编写我的第一个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:

这是我的小提琴：

---

我确信我遗漏了一些简单的东西…

非常好的插件，但其中有一个微妙的逻辑错误。以下是该计划的关键部分：

看到了吗？您不再在整个DOM中分别查找$'.+opts.wrapperClass和$'.+opts.wrapperClass+'.+opts.linesClass，而是只在为插件处理的特定jQuery元素创建的包装中进行扫描

---

而这正是原始版本中的错误所在：即使选项设置正确，也很容易检查-只需将console.logoptions添加到wrap方法中，css在整个DOM中应用于这些行元素。

检查我的答案-以及修补版本。作为旁注-这是一个非常令人印象深刻的作品，而且构建得很好，所以围绕它提问。如果这里至少每十个问题都像你的一样，那就更好了@raina77ow，仅供参考上述模式最初是在jQuery网站上以示例插件的形式提供的。虽然它突然在没有解释的情况下从网站上消失了，但它仍然是一个很棒的插件；一、 首先，还是用它。非常感谢，这正是我所缺少的。像你这样的人能不遗余力地帮助别人真是太好了，谢谢你，我真的很感激。

<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>

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
});