CODEWITHSUNDEEP
javascriptjqueryoopfunction
aurel
aurel

Reputation: 3132

how to use a variable from another function in jquery

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

Upvotes: 1

Views: 628

Answers (3)

user1046334
user1046334

Reputation:

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.

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337600

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

Upvotes: 1

Adam Merrifield
Adam Merrifield

Reputation: 10407

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

Upvotes: 0

Related Questions