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.

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.

• javascript
• jquery

6 Answers 6

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

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

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);
});

best way to it is to pass it as argument

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

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

another way it to define resetColor as function inside the object

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

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

The simple way to solve your problem is to pass the 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 internally, which is to use .apply or .call, which allows specifying the context explicitly:

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

this in javascript refers to the current instance of an object (as in other languages) and is an auto variable. It's of course not available outside an object context.

jQueries $ is a global object, build in a way that this is always the current DOM reference. That's a basic concept behind jQuery.

To solve the above problem, check out this code:

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

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

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

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

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

or add the function to click.

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