Reputation: 1597
I'm trying to access the "this" variable in my plugin but I keep getting the error Uncaught ReferenceError: $self is not defined
. I don't really understand what I'm doing wrong and this is the first time I've tried building a plugin this way.
I've looked at other plugins that follow this pattern but I'm not seeing what I'm missing compared to theirs.
Codes:
;(function($) {
$.fn.videoPagination = function(method) {
// Method calling logic
if (methods[method] && method.charAt(0) != '_') {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.videoPagination');
}
};
var methods = {
init: function(options) {
var o = $.extend({
per_page: 12,
current_page: 1,
src: '/videos.json'
}, options || {});
var $self = $(this);
$self.data('videoPagination', o);
methods.cover();
return this;
},
cover: function() {
$self.find('article').each(function(i) {
var video = $(this);
setTimeout(function() {
video.fadeTo(250, .2);
}, 50*i);
});
}
};
})(window.jQuery);
$('.videos').videoPagination();
Upvotes: 0
Views: 118
Reputation:
The problem is not with your use of this
but is actually with your scoping of the $self
variable, see the comments I added below:
var methods = {
init: function(options) {
var o = $.extend({
per_page: 12,
current_page: 1,
src: '/videos.json'
}, options || {});
var $self = $(this); //You are defining the $self variable here inside the scope of the init function
$self.data('videoPagination', o);
methods.cover();
return this;
},
cover: function() {
$self.find('article').each(function(i) { // then trying to use it here inside the scope of the cover function.
var video = $(this);
setTimeout(function() {
video.fadeTo(250, .2);
}, 50*i);
});
}
};
Instead you need to declare the variable in a larger scope so that you can set and access it in both locations:
(function($) {
$.fn.videoPagination = function(method) {
// Method calling logic
if (methods[method] && method.charAt(0) != '_') {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.videoPagination');
}
};
var $self; //notice that $self is now declared outside of both functions.
var methods = {
init: function(options) {
var o = $.extend({
per_page: 12,
current_page: 1,
src: '/videos.json'
}, options || {});
$self = $(this);
$self.data('videoPagination', o);
methods.cover();
return this;
},
cover: function() {
$self.find('article').each(function(i) {
var video = $(this);
setTimeout(function() {
video.fadeTo(250, .2);
}, 50*i);
});
}
};
})(window.jQuery);
$('.videos').videoPagination();
Upvotes: 1