jQuery pass $this to function parameter

Question

I have:

<img id="leftBubble" class="bubbles" src="left.png" />
<img id="rightBubble" class="bubbles" src="right.png" />

And a hover event like so:

$(".bubbles").each(function(){
    $(this).hover(function() { 
        pause($(this));
    }, function() {
        play(4000, $(this));
    });
});

My pause() function does not seem to be working

function pause(pauseMe) {
    if (pauseMe == $("#leftBubble")) {
        clearTimeout(timer1);                        //this is never reached
    } else if (pauseMe == $("#rightBubble")) {
        clearTimeout(timer2);                        //nor this
    }
}

Any idea to make the hover event pass $this as the parameter for the pause function?

jquery equality is best done with `.is("selector")`: see http://stackoverflow.com/questions/2448291/how-to-check-for-dom-equality-with-jquery/2448362#2448362 — Andras Zoltan, Apr 17 '12 at 20:41
compare jquery object :http://stackoverflow.com/questions/2436966/how-would-you-compare-jquery-objects — malletjo, Apr 17 '12 at 20:42

score 4 · Accepted Answer · answered Apr 17 '12 at 20:41

4

Each time you call $, it returns a different result set object, even if the result contents are the same. The check you have to do is:

if (pauseMe.is("#leftBubble")) {

answered Apr 17 '12 at 20:41

Ates Goral

137,716
26
137
190

score 4 · Answer 2 · answered Apr 17 '12 at 20:47

4

Try like below,

function pause(pauseMe) {
    if (pauseMe == "leftBubble") {
        clearTimeout(timer1);
    } else if (pauseMe == "rightBubble") {
        clearTimeout(timer2);
    }
}

and in the caller,

$(".bubbles").each(function(){
  $(this).hover(function() { 
    pause(this.id);
  }, function() {
    play(4000, $(this));
  });
});

answered Apr 17 '12 at 20:47

Selvakumar Arumugam

79,297
15
120
134

This makes the most sense. Using `.is()` seems to be overkill here. – Apr 17 '12 at 20:57
Actually I require the object itself as the parameter, not the Id – jaredrada Apr 18 '12 at 01:31

score 0 · Answer 3 · answered Apr 17 '12 at 20:42

In javascript, this is redefined each time you enter a new function definition. If you want to access the outside this, you need to keep a reference to it in a variable (I used the self) variable.

$(".bubbles").each(function(){
    var self = this;
    $(this).hover(function() { 
        pause($(self));
    }, function() {
        play(4000, $(self));
    });
});

I don't know if your comparison between jQuery objects will work though. Maybe you can compare the DOM elements: pauseMe[0] == $("#leftBubble")[0], or, as mentioned, the ids.

In this case the outside `this` and the inside `this` will be the same. — , Apr 17 '12 at 20:45

score 0 · Answer 4 · answered Apr 17 '12 at 20:48

When you call $( ... ) it generates new object that not the same that was genereted when you call $( ... ) last time, with same parametrs.

Anyway, you can't compare objects with == in javascript. It returns true only if it liks on same object.

a = {b:1}
c = {b:1}
d = c

a == b // false
d == c // true

jQuery pass $this to function parameter

4 Answers4

Linked