Use $ (this) in an external function

Question

I'm new to JavaScript, and I wonder why it doesn't work for me:

function resetColor(){ $(this).css( { "color": "red" } ) } $('.class').click(function() { resetColor(); }); 

I also tried to save $(this) as a variable when pressing .class , but that didn't help me either.

Answer 1

this represents the context of the person who called the function. When you call resetColor , it implicitly uses the top level this , which is the window object. If you want to maintain context through function calls, you can use call() .

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

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

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

Answer 2

A simple way is to reference a function instead of wrapping it inside an anonymous one, for example:

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

Answer 3

best way to pass this as an argument

 function resetColor(element) { $(element).css( { "color": "red" } ) } $('.class').click(function() { resetColor(this); }); 

another way to define a resetColor function as a function inside an object

  jQuery.fn.resetColor = function() { $(this).css( { "color": "red" } ) } $('.class').click(function() { $(this).resetColor(); }); 

Answer 4

this is a special variable in Javascript, it contains the context of the function call. When you call an object property in the form object.function() , this gets the value of the object. If you do not call the function this way, this defaults to the window object. Since you are not calling a property, the latter happens.

An easy way to solve your problem is to pass the element as an argument.

 function resetColor(element) { element.css({ color: "red" }); } $(".class").click(function() { resetColor($(this)); }; 

Another way is to bind the event directly to the function:

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

Or you can do what jQuery does inside, which should use .apply or .call , which allows you to explicitly specify the context:

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

Answer 5

this in javascript refers to the current instance of the object (as in other languages) and is an automatic variable. This, of course, is not available outside the context of the object.

jQueries $ is a global object created in such a way that this always the current DOM link. This is the basic concept of jQuery.

To solve this problem, check this code:

 function resetColor(that){ $(that).css( { "color": "red" } ) } $('.class').click(function() { resetColor(this); }); 

Answer 6

 function resetColor(classname){ $(classname).css('color', 'red'); } $('.class').click(function() { resetColor(this); }); 

http://jsfiddle.net/eayx/ecLq37ey/

or add a function to click.

 $('.class').click(function() { $(this).css( { "color": "red" } ) });