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.

Solution 1

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

Solution 2

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...

Solution 3

I think jQuery bind might be what you want.

Solution 4

Just define var out of hover function.

View more solutions

Comments

[slobodan]

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

[Nick Craver]

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.

[Run]

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

[user113716]

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.

[Alexander Kim]

Worked for me either :)

[Jeff]

Thanks for the general answer! Helped me out.