Question

我写的这个插件表现得很糟糕。第二个实例是破坏第一个实例中设置的选项。我错过了什么来完成分离，以便可以在同一页面中加载两个副本，并使用不同的参数？

;(function($){
    var self;
    var console = window.console;
    var alert = window.alert;

    var TimeSpinner = function(elem, opt) {
        self = this;
        self.elem = elem;
        self.hour = '00';
        self.quarter = '00';
        self.meridian = 'am';
        return self.init(opt);
    };

    TimeSpinner.prototype = {

        init:   function(opt) {

        }
    };


    $.fn.timeSpinner = function(options) {
    if(this.length) {
        return this.each(function() {
            if (undefined == $(this).data('timeSpinner')) {
                var rev = new TimeSpinner(this, options);
                $(this).data('timeSpinner', rev);
            }
        });
      }
   };
}(jQuery));

jQuery().ready(function($){
    window.startSpinner = $('#start-spinner').timeSpinner({time: '06:30' });
    window.endSpinner = $('#end-spinner').timeSpinner({time: '12:30' });
});

任何见解都表示赞赏。

Answer 1

问题是你在共享范围内进行过的self变量，所以每次调用构造函数时它都会覆盖self的值

  var TimeSpinner = function(elem, opt) {
    var self = this;
    self.elem = elem;
    self.hour = '00';
    self.quarter = '00';
    self.meridian = 'am';
    return self.init(opt);
  };

Answer 2

var TimeSpinner = function(elem, opt) { this.elem = elem; this.hour = '00'; this.quarter = '00'; this.meridian = 'am'; return this.init(opt); };

所有TimeSpinner实例都将使用相同的变量＆＃34; self＆＃34 ;;

为什么要使用＆＃34; self＆＃34;这里吗？

jQuery插件不分离实例

2 个答案: