1

尝试学习可扩展的 jQuery 插件开发。我完全不知道如何从 jQuery 插件包装器调用类中的函数。

我主要从这里为我的代码创建了包装器，并试图理解/使用它，但运气不佳。

下面代码的重要部分。我想要它，这样我就可以调用（例如）$(something).carousel(5)并将该数字传递给slideCarousel 类中的函数。字符串也一样，所以$(something).carousel('go')会go在类中运行。

我怎样才能用这种结构做到这一点？

(function(window, $){

  var Carousel = function(elem, options){
    this.elem = elem;
    this.$elem = $(elem);
    this.options = options;
  };

  Carousel.prototype = {

    defaults: {
     [...]
    },

    init: function() {
      this.config = $.extend({}, this.defaults, this.options);
      this.create();
      return this;
    },
    create: function() {
       [...]
    },
    slide: function(num) {
       [...]
    }
  };

  Carousel.defaults = Carousel.prototype.defaults;

  $.fn.carousel = function(options) {
    return this.each(function() {

      var carousel = new Carousel(this, options);
      if (!options || typeof options == 'object') carousel.init();
      else if (typeof options == 'number') carousel.slide(options);
      else if (typeof options == 'string') carousel.options;

    });
  };

  window.Carousel = Carousel;

})(window, jQuery);
4

1 回答 1

1

您或多或少走在正确的轨道上，您的主要问题是调用carousel.options只会访问您实例的options属性。Carousel您想要做的是动态调用实例上的函数：

 $.fn.carousel = function(options) {
    return this.each(function() {

      var carousel = new Carousel(this, options);

      // do a loose comparison with null instead of !options; !0 == true
      if (options != null || typeof options === 'object')
        carousel.init();
      else if (typeof options === 'number')
        carousel.slide(options);
      // make sure options is the name of a function on carousel
      else if (typeof options === 'string' && typeof carousel[options] === 'function') {
        carousel[options](); // call the function by name
      }

    });
  };
于 2013-05-26T14:56:42.350 回答