I have the following code
(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);
The problem I'm having here is that this.numPanels
gives a result of 0 (and I know it should be 3). It worked before I used 开发者_如何学Pythonthis.
and just had numPanels
as an ordinary variable, but now it doesn't. I'm sorry I can't offer any more information, but my question is this: how can I make variables inside a jQuery plugin 'editable'.
EDIT My apologies for any confusion - I just didn't want to post a silly amount of code and make it unreadable. Please see my full code above.
EDIT 2 I feel like suck a pillock... Take a look at the autoSwitch
function - this is where I get an error: panelWidth is not defined
which is why I tried using this.
this.numPanels++ is local in scope to the anonymous function called in your each(). If you replaced your initial declaration to var numPanels = 0; and accessed it within your function (or passed in numPanels by reference) you'll get the expected result.
Do it like this:
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
});
It sounds like you were using a global variable when it worked. That's not good practice. this
might need to be wrapped in a jquery function call. Try doing $(this).numPanels
first. I can't see the rest of your code so I don't know if that will work. If it doesn't then try storing the variable by attaching it to a DOM element. Like this quick example:
$('#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.
the problem with the this scope.
you created a this variable outside of everithing, and then you want to call the this variable inside of an each function.
they have different scopes.
you need to create a global variable wich accesible in every object.
var numPanels = 0;
and then yo can use numPanels++;
精彩评论