How to access properties of function within function

Question

How do I access isExpanded, collapsedHeight and expandedHeight inside the jQuery click handler for element.
The way it's written now won't work because this means something else inside the click handler than it does outside of it.

function CoolSelect(element)
{
    this.element=element;
    this.isExpanded=false;
    this.collapsedHeight=$(element).height();
    this.expandedHeight=this.collapsedHeight+$('ul',element).height();

    $(this.element).click(function()
    {
        var newHeight;
        if(this.isExpanded){newHeight=this.collapsedHeight;}
        else{newHeight=this.expandedHeight;}
        $(this.element).animate({height:newHeight},100,'liniar');
    });
}

Thank you.

Quentin · Accepted Answer · 2011-07-20 16:05:58Z

3

Copy the value of this to another variable in the outer function.

var that = this;

Then use that in the inner function.

answered Jul 20, 2011 at 16:05

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

1 Comment

Francisc Over a year ago

Out of curiosity, wouldn't it be easier if I just declared each class property as a var and just access it in the inside functions?

Lime · Accepted Answer · 2011-07-20 16:06:15Z

3

You need to save a reference to this. This code uses var that = this;

function CoolSelect(element)
{
    this.element=element;
    this.isExpanded=false;
    this.collapsedHeight=$(element).height();
    this.expandedHeight=this.collapsedHeight+$('ul',element).height();
    var that = this;

    $(this.element).click(function()
    {
        var newHeight;
        if(that.isExpanded){newHeight=that.collapsedHeight;}
        else{newHeight=that.expandedHeight;}
        $(that.element).animate({height:newHeight},100,'liniar');
    });
}

answered Jul 20, 2011 at 16:06

Lime

13.6k12 gold badges59 silver badges93 bronze badges

3 Comments

Francisc Over a year ago

Thank you, Lime. I chose the answer that was posted first. Otherwise, yours was just as good.

Lime Over a year ago

16 seconds make all the difference :D

Francisc Over a year ago

I had no other criteria. Haha.

Collectives™ on Stack Overflow

How to access properties of function within function

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related