0

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

http://jsfiddle.net/XXw5h/7/

;(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插件多重实例化

但我就是不能让它工作。

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

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

4

2 回答 2

1

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/

于 2013-07-19T17:41:51.497 回答
1 
self = this;
aEl = $('<a/>', {  
    href: '#',
    text: this.options.propertyName,
    click: function(e){self._clicked();}
});

您在此处分配给一个全局变量self，该变量将被第二个插件实例化覆盖并且仅引用该变量。

添加var关键字使其成为局部变量。

于 2013-07-19T17:21:36.447 回答