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 stackoverflow.com/questions/2448291/… — Andras Zoltan
– Andras Zoltan, Commented Apr 17, 2012 at 20:41
compare jquery object :stackoverflow.com/questions/2436966/… — malletjo
– malletjo, Commented Apr 17, 2012 at 20:42

Ateş Göral · Accepted Answer · 2012-04-17 20:41:41Z

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, 2012 at 20:41

Ateş Göral

141k27 gold badges142 silver badges191 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Selvakumar Arumugam · Accepted Answer · 2012-04-17 20:47:13Z

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, 2012 at 20:47

Selvakumar Arumugam

79.9k15 gold badges123 silver badges139 bronze badges

2 Comments

user1106925 Over a year ago

This makes the most sense. Using .is() seems to be overkill here.

jaredrada Over a year ago

Actually I require the object itself as the parameter, not the Id

Juan Enrique Muñoz Zolotoochin · Accepted Answer · 2012-04-17 20:42:00Z

0

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.

answered Apr 17, 2012 at 20:42

Juan Enrique Muñoz Zolotoochin

3,6094 gold badges36 silver badges42 bronze badges

1 Comment

user1106925 Over a year ago

In this case the outside this and the inside this will be the same.

Roman Pominov · Accepted Answer · 2012-04-17 20:48:10Z

0

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

answered Apr 17, 2012 at 20:48

Roman Pominov

1,4331 gold badge12 silver badges18 bronze badges

Collectives™ on Stack Overflow

jQuery pass $this to function parameter

4 Answers 4

Comments

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related