jQuery 插件变量

Question

我有以下代码

(function($) {    // carousel    var Carousel = {        settings: {            itemsPerPage: 1,            itemsPerTransition: 1,            noOfRows: 1,            pagination: true,            nextPrevLinks: true,            speed: 'normal',            easing: 'swing',            loop: false,            auto: true,            autoTime: 4000,            maxHeight: 300,            maxWidth: 500        },        init: function(el, options)         {            if (!el.length)             {                 return false;             }            this.options = $.extend({}, this.settings, options);            this.container = el;            this.panelHeight = 0;            this.panelWidth = 0;            this.numPanels = 0;            // Find biggest panel in set            this.container.find(".tinycarousel > li > div").each(function()             {                if($(this).outerHeight() > this.panelHeight)                {                    this.panelHeight = $(this).outerHeight();                }                if($(this).outerWidth() > this.panelWidth)                {                    this.panelWidth = $(this).outerWidth();                }                this.numPanels++;            });            alert(this.numPanels);        },        autoSwitch: function()        {            this.container.find(".tinycarousel").animate({marginLeft: -panelWidth});        }    };    // bridge    $.fn.tinycarousel = function(options) {        return this.each(function() {            var obj = Object.create(Carousel);            obj.init($(this), options);            $.data(this, 'carousel', obj);        });    };})(jQuery);

我在这里遇到的问题是 this.numPanels 给出的结果为 0(而且我知道它应该是 3)。在我使用 this. 之前它可以工作，并且只是将 numPanels 作为普通变量，但现在不行了。很抱歉我无法提供更多信息，但我的问题是:如何使 jQuery 插件内的变量“可编辑”。

编辑对于任何混淆，我深表歉意 - 我只是不想发布大量愚蠢的代码并使其不可读。请参阅上面我的完整代码。

编辑 2 我感觉就像吸了一个枕头...看看 autoSwitch 函数 - 这是我收到错误的地方:panelWidth is not定义了，这就是我尝试使用this.

的原因

Answer 1

this.numPanels++ 的作用域是在each() 中调用的匿名函数的本地范围内。如果您将初始声明替换为 var numPanels = 0;并在您的函数中访问它(或通过引用传入 numPanels)，您将获得预期的结果。

这样做:

this.panelHeight = 0;
this.panelWidth = 0;
this.numPanels = 0;
var self = this; // reference to this
// Find biggest panel in set
this.container.find(".tinycarousel > li > div").each(function() {
    if($(this).outerHeight() > self.panelHeight) { // use self
        self.panelHeight = $(this).outerHeight();  // use self
    }

    if($(this).outerWidth() > self.panelWidth){    // use self
        self.panelWidth = $(this).outerWidth();    // use self
    }
    self.numPanels++; // use self
});