jQuery access parent object attribute?

Question

So I have this code:

function theObject(){
    this.someelement = $("#someelement");
    this.someotherelement = $("someotherelement");
    this.someelement.fadeOut(500, function(){
       this.someotherelement.attr("title", "something");
       this.someelement.fadeIn(500); 
    });
}

for some reason this.someotherelement is undefined. I'm guessing because it's wrapped in a function(){} ?

Answer 1

Inside the function this means something else. You could capture it though:

this.someotherelement = $("someotherelement");
var _this = this;
this.someelement.fadeOut(500, function(){
   _this.someotherelement.attr("title", "something");
   _this.someelement.fadeIn(500); 
});

Answer 2

This is caused by a JavaScript scoping issue. Creating a function creates a new scope for this which makes this refer to the function. You can fix it by doing ... this:

function theObject(){
  this.someelement = $("#someelement");
  this.someotherelement = $("someotherelement");

  // bind this to that (what?). This way, this will still be accessible inside
  // the new function's scope as that
  var that = this;
  this.someelement.fadeOut(500, function(){
    that.someotherelement.attr("title", "something");
    that.someelement.fadeIn(500); 
  });
}

Answer 3

I have edited your code , I hope it helps.

function theObject(){
    var someelement = $("#someelement");
    var someotherelement = $("#someotherelement");
    someelement.fadeOut(500, function(){
       someotherelement.attr("title", "something");
       someelement.fadeIn(500); 
    });
}

Answer 4

is someotherelement an ID? If so, you are missing a #...

this.someotherelement = $("#someotherelement");