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插件中创建变量'editable'。

修改我为任何困惑道歉 - 我只是不想发布一些愚蠢的代码并使其无法读取。请参阅上面的完整代码。

编辑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

此范围的问题。

你在everithing之外创建了一个这个变量，然后你想在每个函数中调用this变量。

他们有不同的范围。

你需要创建一个可以在每个对象中访问的全局变量。

var numPanels = 0;

然后你可以使用numPanels++;

jQuery插件变量

3 个答案: