Using variables in JQuery functions

Question

I've got a simple question about accessing variables in jQuery. Is there are way to access the variable (wrap) when I call the read function on click of 'a'.

(function() {
    var Example= {
        init: function() {
            var wrap = 'hello world';
            $('a').on('click', this.read);
        },

        read: function() {
            console.log(wrap)
        }
    };

    Example.init();
})();

Brian Flanagan · Accepted Answer · 2012-04-14 01:09:51Z

3

There are a few ways to accomplish this. Perhaps the easiest is to change the scope of the 'wrap' variable. Currently, since it's declared with a var inside the init function, it's scoped to the init function and not available outside of init directly. So, you can declare the 'wrap' outside the init (it could be a property of the 'Example' object):

    var Example= {
        wrap: 'hello world',
        init: function() {
            var self = this;
            $('a').click(function(){
                self.read();
            });
        },

        read: function() {
            console.log(this.wrap);
        }
    };

    Example.init();

This makes 'wrap' scoped to 'Example' and available as a property of 'Example' throughout any function defined within 'Example'.

(Edit: had to tweak this a bit to properly handle the closure.)

edited Apr 14, 2012 at 1:09

answered Apr 14, 2012 at 1:03

Brian Flanagan

4,6425 gold badges33 silver badges38 bronze badges

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

4 Comments

Matt Over a year ago

Is there any best practice for managing more variables with this sort of structure or would you just add more like the wrap: 'hello world'?

Brian Flanagan Over a year ago

It depends on the project, really. My objects tend to carry properties and functions that are what seem to me to be a natural part of the object. In you're case, it's tough for me to tell if 'wrap' is a variable that should be a property of the 'Example' object or not. For instance, if 'wrap' needed to 'do' anything else (such as hide or show itself) then I'd probably make wrap it's own object and let 'Example' (or any other objects you may have) execute calls directly on it. If, however, 'wrap' is just a string that 'Example' uses, I'd leave it as a property of 'Example'.

Matt Over a year ago

Thanks, I'll have to read up on code structure as I'm new to jQuery.

Brian Flanagan Over a year ago

Just FYI - this structure isn't really a jQuery thing as much as a JavaScript thing. Here are a couple of handy resources that I've used to get up to speed on JavaScript objects: developer.mozilla.org/en/… javascriptkit.com/javatutors/oopjs.shtml

jimw · Accepted Answer · 2012-04-14 00:59:03Z

3

(function() {
    var wrap;
    var Example= {
        init: function() {
            wrap = 'hello world';
            $('a').on('click', this.read);
    ...

Because functions have access to all variables visible from their definition scope.

answered Apr 14, 2012 at 0:59

jimw

2,60817 silver badges12 bronze badges

3 Comments

Matt Over a year ago

Thanks, would I also declare variables like this if I needed many for my project?

jimw Over a year ago

Yup, you can use as many as you want. If you have a number of related variables (imageWidth, imageHeight, imageName, for example), then it's a good idea to pass them as properties of an object: image.width, image.height etc..

Matt Over a year ago

So I could create: var cache = { var one = one var two = two } Won't this cause the same problem as before?!

Nej Kutcharian · Accepted Answer · 2012-04-14 01:06:37Z

0

(function() {
    var Example= {
        init: function() {
            this.wrap = 'hello world';
            $('a').on('click', this.read);
        },
        read: function() {
            console.log(this.wrap)
        }
    };
    Example.init();
})();

answered Apr 14, 2012 at 1:06

Nej Kutcharian

4,2745 gold badges23 silver badges27 bronze badges

Comments

Yaron U. · Accepted Answer · 2012-04-14 01:08:23Z

0

try this: (Fiddle: http://jsfiddle.net/jRJFQ/3/)

(function(){
    var Example= {
        wrap:null,
         init: function() {
            this.wrap = 'hello world';
            $('a').on('click', this.read);
         },

        read: function() {
            console.log(Example.wrap)
        }
    };
    Example.init();
})();

answered Apr 14, 2012 at 1:08

Yaron U.

7,9333 gold badges33 silver badges45 bronze badges

Comments

elclanrs · Accepted Answer · 2012-04-14 01:11:06Z

0

If you consider using the revealing module pattern you can define which variables are private and which are public like this:

var Example = (function(){

    var wrap = 'hello world',
        init = function(){
            ...
        },
        read = function(){
            ... // You can use `wrap` here
        };

    return { // Return public variables and methods
        init: init,
        read: read
    };

})();

Example.init();

answered Apr 14, 2012 at 1:11

elclanrs

94.2k21 gold badges137 silver badges171 bronze badges

Comments

Adam Seabridge · Accepted Answer · 2012-04-14 01:16:46Z

-1

yup this should do it:

(function() {
    var wrap;
    var Example= {
        init: function() {
            var wrap = 'hello world';
            $('a').on('click', this.read);
        },

        read: function() {
            console.log(wrap)
        }
    };

    Example.init();
})();

edited Apr 14, 2012 at 1:16

answered Apr 14, 2012 at 0:59

Adam Seabridge

2,0541 gold badge22 silver badges27 bronze badges

Collectives™ on Stack Overflow

Using variables in JQuery functions

6 Answers 6

4 Comments

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related