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

Answer 1

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.