how to use a variable from another function in jquery

Question

This is a basic version of my function (first time I am doing this, so I'm sorry if I don't explain it well)

var pages = {
    init:function(){

    },
    home:function(){

        articleid = this.closest("article").attr('id');
        skillsbtn =  $(this).hasClass("skillsbt");
        home = $('#home');
        homeheight = '-' + home.height();

    if (skillsbtn && articleid == "home"){
        home.animate({"marginTop"   : homeheight},800);
    }
},
    work:function(){
//same variables are requred here: skillsbtn =  $(this).hasClass("skillsbt");...
    },
    skills:function(){
//same variables are requred here: skillsbtn =  $(this).hasClass("skillsbt");...
    },
    contact:function(){

    },
}

So the idea is skillsbtn = $(this) refer to whatever $(this) is at home:function. I have tried to duplicate the variables from home:function to work:function and it wokeded fine. But can I put the variable I need in the init:function but be able to call them within the home:function and by doing so, be able to change what ever $(this) is, to mean this->home, or this->work

I have tried to access it like pages.init.skillsbtn.call(this) but it dies not work.

Hope you can help - Thanks

Rory McCrossan · Accepted Answer · 2012-02-23 08:46:32Z

1

Create another object which contains the variables you require to be in global scope and use it as a repository. Try this:

var pages = {
    init: function() {
    },
    settings: {
        skillsButton: "test"
    },
    home: function() {
        this.settings.skillsButton = "value changed in 'home'";
    }
}

You can then refer to settings.skillsButton wherever you require it.

Example fiddle

answered Feb 23, 2012 at 8:46

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

1 Comment

kapa Over a year ago

He will have a problem here because as I see it this refers to a DOM element in his code.

Rory McCrossan · Accepted Answer · 2012-02-23 09:04:17Z

0

You use global variables all over (where is the var before each of the leading four assignments in home function)?

You want to share state and you do not use objects for this? That's what they are for. What is pages? If it is some kind of 'repository' or 'namespace', maybe use UpperCase name to distinguish it is not the plain instance.

Since this in jQuery events is bound to the source of the event, you cannot use this plainly, but you can do this:

var Pages = {
    init:function(){
      Pages.worker = new PagesWorker;
      // later if you see fit you can have more of these
    },
    home:function(){
      return Pages.worker.home($(this));
    },
    work:function(){
      return Pages.worker.work($(this));
    },
    skills:function(){
      return Pages.worker.skills($(this));
    },
    contact:function(){
      return Pages.worker.contact($(this));
    },
}

function PagesWorker(src){
  // init
}

PagesWorker.prototype.home = function(src){

    // use var xxx = yyy for ones local for this function only
    // use this.xxx = yyy for those that should persist between functions   
    var articleid = src.closest("article").attr('id');
    this.skillsbtn =  src.hasClass("skillsbt");
    var home = $('#home');
    var homeheight = '-' + home.height();

    if (this.skillsbtn && articleid == "home"){
        home.animate({"marginTop"   : homeheight},800);
    }
};

PagesWorker.prototype.work = function(src){
  //same variables are requred here: skillsbtn etc.
  //no problem, use this.skillsbtn etc.
};

PagesWorker.prototype.skills = function(src){
  //same variables are requred here: skillsbtn etc.
  //no problem, use this.skillsbtn etc.
};

PagesWorker.prototype.contact = function(src){
  //same variables are requred here: skillsbtn etc.
  //no problem, use this.skillsbtn etc.
};

If you are really sure you will only have one pages object, you can use pages.xxx to share variables between function calls and your original code. But that is not the right thing to do unless you are really, really sure.

edited Feb 23, 2012 at 9:04

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

answered Feb 23, 2012 at 9:00

user1046334

2 Comments

aurel Over a year ago

can all this (programming) be learned by practice and tutorials or do I need to read any background information? in order to become good at this

user1046334 Over a year ago

I'd say practice is not enough, without some sort of guidance you learn lot of 'hacking' and 'shortcuts'. The copy-paste-modify works if you know what you want, but less as a long-time learning. You should read some books, or good blogs (I don't know of good ones for beginner, though; I feel good at www.c2.com or www.martinfowler.com but these are more about higher level - but after all, design is what is important, the program (and language to write it) is just an implementation - if your design is bad, even Smalltalk won't help you do it right).

Adam Merrifield · Accepted Answer · 2012-02-23 08:36:01Z

Make the variable global by declaring it outside the function and assigning it inside the function

var globalVar,
    pages = {
    init:function(){

    },
    home:function(){

        articleid = this.closest("article").attr('id');
        skillsbtn =  $(this).hasClass("skillsbt");
        home = $('#home');
        homeheight = '-' + home.height();

    if (skillsbtn && articleid == "home"){
        home.animate({"marginTop"   : homeheight},800);
    }
},
    work:function(){
//same variables are requred here: skillsbtn =  $(this).hasClass("skillsbt");...
    },
    skills:function(){
//same variables are requred here: skillsbtn =  $(this).hasClass("skillsbt");...
    },
    contact:function(){

    },
}

Then assign whatever you want to use to the global variable

Collectives™ on Stack Overflow

how to use a variable from another function in jquery

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related