Question

我正在寻求帮助。我的代码在这里有几乎干净的jquery样板：

;(function ( $, window, document, undefined ) {


    var pluginName = "defaultPluginName",
        defaults = {
            propertyName: "value"
        };

      function Plugin( element, options ) {
        this.element = element;


        this.options = $.extend( {}, defaults, options );

        this._defaults = defaults;
        this._name = pluginName;

        this.init();
    }

    Plugin.prototype = {

        someVal: Math.round(Math.random() * 99999999),

        init: function() {
            self = this;

            aEl = $('<a/>', {  
                href: '#',
                text: this.options.propertyName,
                click: function(e){self._clicked();}
            });

            $(".el1").before(aEl);    
            $(".el1").before("<br/>");    

        },

        _clicked: function(el, options) {
            alert("Random value of el instance:" + this.someVal);
            alert("Property name:" + this.options.propertyName);
        }
    };


    $.fn[pluginName] = function ( options ) {
        return this.each(function () {
            if (!$.data(this, "plugin_" + pluginName)) {
                $.data(this, "plugin_" + pluginName, new Plugin( this, options ));
            }
        });
    };

})( jQuery, window, document );

$('.el1').defaultPluginName({
  propertyName: 'el1 link '
});

$('.el2').defaultPluginName({
  propertyName: 'el2 link'
});

我的问题是我需要多个实例化，这就是我的麻烦开始的地方。我知道我的问题在这里得到了解答：

jQuery plugin multiple instantiation

但我无法让它发挥作用。

当您点击链接的jsfiddle上的el1链接时，我需要显示插件的第一个实例的一个随机数和属性。当您在链接的jsfiddle上单击el2链接时，我需要显示第二个插件实例的第二个随机数和属性。目前两个链接都是一样的。

我的问题是如何为我的插件的每个实例创建自己的选项？然后，创建我自己的每个实例变量的正确方法是什么？谢谢！

Answer 1

self = this;
aEl = $('<a/>', {  
    href: '#',
    text: this.options.propertyName,
    click: function(e){self._clicked();}
});

你在这里分配了一个全局变量self，它将被第二个插件实例化覆盖，并且只会引用它。

添加var keyword以使其成为局部变量。

Answer 2

Bergi的答案是肯定的，你应该将self定义为局部变量。另外，我想补充一点，每次点击链接时都应该让someVal函数有一个随机数，否则它们在初始化时将是相同的数字。所以更新的代码应该是：

Plugin.prototype = {

    someVal: function () { 
        return Math.round(Math.random() * 99999999) 
    },

    init: function() {
        var self = this;

        aEl = $('<a/>', {  
            href: '#',
            text: self.options.propertyName,
            click: function (e) {
                e.preventDefault();
                self._clicked();
            }
        });

        $(".el1").before(aEl);    
        $(".el1").before("<br/><br/>");    

    },

    _clicked: function(el, options) {
        alert("Random value of el instance:" + this.someVal());
        alert("Property name:" + this.options.propertyName);
    }
};

小提琴：http://jsfiddle.net/hieuh25/XXw5h/8/

jQuery插件 - 多个实例化

2 个答案: