Use $(this) in an outside function

Question

I'm new to JavaScript and I wonder why it's not working for me:

function resetColor(){
     $(this).css( { "color": "red" } )
}

$('.class').click(function() {
     resetColor();
});

I also tried to save $(this) as a variable when clicking the .class, but that didn't work for me also.

Answer 1

A simpler way is to reference the function instead of wrapping it inside an anonymous one, like this:

$('.class').click(resetColor);

Answer 2

this represents the context of who called the function. When you call resetColor, it's implicitly using the top level this which is the window object. If you would like maintain context to through function calls, you can use call().

$('.class').click(function() {
    resetColor.call(this);
});

The other obvious option is to not use this, but rather pass the element as an argument.

function resetColor(e) {
     $(e).css({color: 'red'});
}

$('.class').click(function() {
     resetColor(this);
});