How can $(this) be available globally

Question

In JQuery, it seems that $(this) only works locally.

give a quick example:

$(".someClass .type1").click(function(){
    $(".someClass .type1").html("<img src='image/2.png'>");
    $(this).html("<img src='images/img.png'>");
});

$(".otherClasses").click(function(){
    $(".otherClasses .type1").html("<img src='image/2.png'>");
    $(this).html("<img src='images/img.png'>");
});

Ideally, I want to write a function like this:

function changeImg () {
   $(this).html("<img src='images/img.png'>");
}

And then call changeImg() under the jquery click functions like:

$(".someClass .type1").click(function(){
        $(".someClass .type1").html("<img src='image/2.png'>");
        changeImg();
});

However, in this way, the $(this) will be 'undefined' instead of the one that is clicked anymore. Is there a way to make it available like a global variable?

Thank you!

score 3 · Accepted Answer · answered Oct 01 '13 at 14:09

Pass this as a parameter to your functions:

function changeImg (el) {
   $(el).html("<img src='images/img.png'>");
}

$(".someClass .type1").click(function(){
        $(".someClass .type1").html("<img src='image/2.png'>");
        changeImg(this);
});

score 3 · Answer 2 · answered Oct 01 '13 at 14:10

3

You could do this to set the context:

changeImg.call(this);

See MDN for Function.prototype.call

answered Oct 01 '13 at 14:10

Jason P

26,984
3
31
45

score 1 · Answer 3 · answered Oct 01 '13 at 14:09

Use

 changeImg(this); // pass this here

you code becomes

$(".someClass .type1").click(function(){
            $(".someClass .type1").html("<img src='image/2.png'>");
            changeImg(this); // pass this here 
    });
function changeImg (elem) {
   $(elem).html("<img src='images/img.png'>");
}

How can $(this) be available globally

3 Answers3