plugins - How to change 'this' in jquery callback -
i have written jquery plugin takes number in div , makes count up. i've tried add callback when finishes starts on next div.
when starts working on next div first resets number in current div, before carrying on on next div expected. suspect using 'this' inside of plugin.
here full (not) working example -->
how prevent happening? thanks
my plugin:
(function( $ ) { $.fn.countup = function(options) { var settings = $.extend( { 'startfrom' : 0, 'countto' : number(this.text()), 'start' : 10, 'frequency' : 200, 'jump' : 1, 'target' : this, 'log' : false, 'callback' : '' }, options); var intregex = /^\d+$/; if(intregex.test(settings.countto) && intregex.test(settings.startfrom) ) { // both settings integers, started: if(settings.startfrom<settings.countto){ offset = settings.jump; }else{ offset = -1 * settings.jump; } current_number = settings.startfrom; settings.target.html(current_number); checknumber(); var timer; function checknumber(){ if(offset<0){ if(current_number <= settings.countto) { current_number = settings.counto; cleartimeout(timer); if (typeof settings.callback == 'function') { // make sure callback function settings.callback.call(this); // brings scope callback } } else { current_number += offset; timer=settimeout(function(){checknumber()},settings.frequency); } }else{ if(current_number >= settings.countto) { current_number = settings.counto; cleartimeout(timer); if (typeof settings.callback == 'function') { // make sure callback function settings.callback.call(this); // brings scope callback } } else { current_number += offset; timer=settimeout(function(){checknumber()},settings.frequency); } } settings.target.html(current_number); if(settings.log){console.log(settings.target.attr('id'))}; } }else{ if(settings.log){console.log('from countup: please use integer startfrom , countto arguments.');} } }; })( jquery );
and here how i'm calling it:
$(document).ready(function(){ $("#output").countup({ 'log' : true, 'callback' : call2 }); function call2(){ $("#output2").countup({ 'log' : true, 'callback' : call3 }); } function call3(){ $("#output3").countup({'log' : true}); } })
create variable outside of scope set this
var $this = this;
that fix issue if reading question correctly. this
overwritten functions scope.
update
fyi, there typo in code:
current_number = settings.counto;
i assume should settings.countto
?
edited code
(function( $ ) { $.fn.countup = function(options) { var $this = this; var settings = $.extend( { 'startfrom' : 0, 'countto' : number($this.text()), 'start' : 10, 'frequency' : 200, 'jump' : 1, 'target' : $this, 'log' : false, 'callback' : '' }, options); var intregex = /^\d+$/; if(intregex.test(settings.countto) && intregex.test(settings.startfrom) ) { // both settings integers, started: if(settings.startfrom<settings.countto){ offset = settings.jump; }else{ offset = -1 * settings.jump; } current_number = settings.startfrom; settings.target.html(current_number); checknumber(); var timer; function checknumber(){ if(offset<0){ if(current_number <= settings.countto) { current_number = settings.counto; cleartimeout(timer); if (typeof settings.callback == 'function') { // make sure callback function settings.callback.call($this); // brings scope callback } } else { current_number += offset; timer=settimeout(function(){checknumber()},settings.frequency); } }else{ if(current_number >= settings.countto) { current_number = settings.counto; cleartimeout(timer); if (typeof settings.callback == 'function') { // make sure callback function settings.callback.call($this); // brings scope callback } } else { current_number += offset; timer=settimeout(function(){checknumber()},settings.frequency); } } settings.target.html(current_number); if(settings.log){console.log(settings.target.attr('id'))}; } }else{ if(settings.log){console.log('from countup: please use integer startfrom , countto arguments.');} } }; })( jquery );
Comments
Post a Comment