jQuery plugin instance variables

Question

I'm beginning with jQuery plugins, apologies for the newbie question. My objective is to have a single plugin instantiated twice, where each instance has its own variables values. However, they seem to share the namespace.

For example, given the following plugin:

(function ( $ ) {

    var x = false;

    $.fn.test = function() {

        alert(x);

        if ( !x )
           x = true;

        return this;

    };

}( jQuery ));

that is invoked from the following divs:

$( "div1" ).test();
$( "div2" ).test();

The alert displays first false, then true, when the objective is to have to sets of variables where the alert would display false twice.

is this possible?

possible duplicate of jQuery global variable best practice & options? — TheNorthWes
– TheNorthWes, Commented Jun 20, 2014 at 17:32

vinczemarton · Accepted Answer · 2014-06-21 20:58:44Z

2

There is some confusion in your question. Your plugin is a simple function. You don't "instantiate" a function by calling it. So you don't "instantiate" your plugin either.

You can instantiate things in your function, and persist them somewhere.

Since the outer scope runs only once, in your original solution you only get one instance of variable x.

If you create it inside the function, a new instance gets created every time you call it.

I assume you want to create an instance for every element you call this plugin on. A good solution would be to attach your data to the DOM element you initiate your plugin on, like:

(function ( $ ) {
    $.fn.test = function() {
        var vars = this.data('testPlugin');
        if (!vars) {
            vars = {
                x: false,
                something: 'else'
            };
            this.data('testPlugin', vars);
        }

        alert(vars.x);
        vars.x = !vars.x;

        return this;
    };
}( jQuery ));

Try this fiddle.

edited Jun 21, 2014 at 20:58

answered Jun 20, 2014 at 17:44

vinczemarton

8,2267 gold badges59 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ps0604 Over a year ago

thanks, I said "instantiate" because I see the plugin as an object with attributes and functions.

Daniele Santi · Accepted Answer · 2014-06-20 17:33:50Z

0

You should put

var x = false;

inside $.fn.test function, otherwise the x variable is the same for all test() functions, and set to true after first call.

You can read more here about javascript variable scoping.

answered Jun 20, 2014 at 17:33

Daniele Santi

7693 gold badges25 silver badges33 bronze badges

1 Comment

ps0604 Over a year ago

Thanks, but it didn't work. I put var x = false; inside $.fn.test function and obviously the variable is always set to false, not only after the first call.

James Lee Baker · Accepted Answer · 2014-06-21 16:56:38Z

0

Actually, this is much easier than the previous answers. The context of this in your plugin is the jQuery object for the DOM element you're receiving based on the selector you provided. To gain uniqueness, simply iterate over each element, like so:

(function($) {
  $.fn.test = function() {
    return this.each(function() {
      var x = false;

      alert(x);

      if (!x) {
        x = true;
      } 
    });
  }
}(jQuery));

$("div1").test();  //false
$("div2").test();  // false

Here's a JSFiddle to confirm: http://jsfiddle.net/Z6j7f/

answered Jun 21, 2014 at 16:56

James Lee Baker

8377 silver badges9 bronze badges

2 Comments

vinczemarton Over a year ago

alert(x) will always alert false here, and since nothing else accesses the inner scope the if... part is completely unnecessary since nothing else will access x ever. Is this intended? return this.each(function () { alert(false); }); would do exactly the same.

James Lee Baker Over a year ago

From my interpretation of the original problem posted, the conditional check was arbitrary and used to evaluate if the state of x changed. I would agree with you that the condition is unnecessary.

Collectives™ on Stack Overflow

jQuery plugin instance variables

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related