jquery plugin local variables between methods

Question

I'm with trouble with a jquery plugin i've quickly playing around. Its fades in when a start handle event of ajax is called and stops with complete handle.

Exemple:

start : function (e,o) { 
    target.mask();
    target.showMaskAjax();
},

complete : function (e,o) {
    target.hideMaskAjax();....
},

The question is..when I fire 2 ajax calls I want to correctly have access of variables inside "hideMaskAjax" where have been initialize in "target.mask()"

in target.mask() i've been trying:

 this.mask = $("<div/>", {css: {display: "none"}).addClass("loading_mask");
 this.spinner = $("<div/>", {css: {display: "none"}}).addClass("spinner");

And in target.hideMaskAjax():

alert(this.mask); //fail

Also creating global variables in plugin for this seems dont work for more than one invokes of it.

Answer 1

Wed really need to see the rest of the plugin code to see how youre doing it. That said it sounds to me like you need to create an actual Object so that you can have member variables and multiple instances. Then you can attach things to it.

Answer 2

Don't overcomplicate things, imo. Your simplest, quickest and dirtiest solution is to put your variable directly in target. Both functions have access to target as this. Choose an uncommon name.

Your alert(this.mask) is probably failing, btw because mask is already declared as a function on target (hence why you need to be careful with naming). Try prepending with underscores.