Переменные плагина 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 defined именно поэтому я попытался использовать 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
});

Answer 2

Похоже, вы использовали глобальную переменную, когда она работала. Это не очень хорошая практика. this может потребоваться заключить в вызов функции jquery. Попробуйте сначала сделать $(this).numPanels. Я не вижу остальной части вашего кода, поэтому не знаю, сработает ли это. Если это не так, попробуйте сохранить переменную, прикрепив ее к элементу DOM. Как этот быстрый пример:

$('#myElement').data('numPanels', 0); // Storing the data.

var numPanels = $('#myElement').data('numPanels'); // Retrieving the data.
numPanels++; // Do work.
$('#myElement').data('numPanels', numPanels); // Storing the new data.

Answer 3

проблема с этой областью.

вы создали переменную this вне everithing, а затем хотите вызвать переменную this внутри каждой функции.

у них разные области применения.

вам нужно создать глобальную переменную, доступную для каждого объекта.

var numPanels = 0;

и тогда вы можете использовать numPanels++;