jquery: passing variables in hover() function?

Question

Can I pass a variable in hover()?

As in the script below, I don't want to declare the same variable twice var target = xxx and I don't want to make this variable a global target = xxx bcos I have other function using this variable name - target.

   $('.image-profile').hover(function () {

        var target = $('.button-change-image-profile',this);
        target.show();

    },function () {

        //var target = $('.button-change-image-profile',this);
        target.hide();

    });

So I tried to pass the var like this },function (target) {, of course it is wrong, but any other method to pass this var?

thanks.

what is the use of passing argument to events type of function , what ever you want will be availabe through events or this... — kobe
– kobe, Commented Nov 26, 2010 at 17:19

Nick Craver · Accepted Answer · 2010-11-26 17:18:15Z

7

The short version is just to toggle here:

$('.image-profile').hover(function () {
    $('.button-change-image-profile',this).toggle();
});

To have it available in each handler (as a more general solution) define it outside when looping (using .each() for example), like this:

$('.image-profile').each(function() {
    var target = $('.button-change-image-profile',this);
    $(this).hover(function () {
        target.show();
    },function () {
        target.hide();
    });
});

answered Nov 26, 2010 at 17:18

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

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

1 Comment

Run Over a year ago

thanks so much! why didn't I think of that!?? thanks for the help :-)

Julián Landerreche · Accepted Answer · 2011-04-21 03:51:28Z

7

Another possible approach: to save data into the this of the hover in/out using jQuery .data(). You save it on mouse in, you retrieve it on mouse out. This may be conceptually similar to use a global var or a var out of hover function, thus, t may create some garbage...

$('.image-profile').hover(function () {

  var target = $('.button-change-image-profile',this);
  target.show();

  // we save the target object into the 'target' key.
  $(this).data('target',target);  

},function () {

  // we retrieve the target object (a jQuery object) and then hide it.
  $(this).data('target').hide();

});

Hopefully, this approach isn't too wrong...

answered Apr 21, 2011 at 3:51

Julián Landerreche

711 silver badge1 bronze badge

1 Comment

Alexander Kim Over a year ago

Worked for me either :)

Marek Sapota · Accepted Answer · 2010-11-26 17:19:54Z

2

I think jQuery bind might be what you want.

answered Nov 26, 2010 at 17:19

Marek Sapota

20.6k3 gold badges37 silver badges48 bronze badges

Comments

Wouter Dorgelo · Accepted Answer · 2012-07-15 23:37:08Z

1

Just define var out of hover function.

edited Jul 15, 2012 at 23:37

Wouter Dorgelo

12.1k12 gold badges67 silver badges80 bronze badges

answered Nov 26, 2010 at 17:18

slobodan

2091 silver badge4 bronze badges

3 Comments

slobodan Over a year ago

in javaScript every variable defined out of function is some kind of global.

Nick Craver Over a year ago

This is a very bad way to "solve" the problem, and in fact would cause issues here, since there are likely many .image-profile elements.

user113716 Over a year ago

If you mean that any variable that is not inside a function is global, then you'd be right. If you mean that defining the variable outside the hover handlers will make it global, then that would depend on where this code is located. If it is in another function body, then the variable wouldn't be global.

Collectives™ on Stack Overflow

jquery: passing variables in hover() function?

4 Answers 4

1 Comment

1 Comment

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related