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

Popular posts from this blog

android - getbluetoothservice() called with no bluetoothmanagercallback -

sql - ASP.NET SqlDataSource, like on SelectCommand -

ios - Undefined symbols for architecture armv7: "_OBJC_CLASS_$_SSZipArchive" -