Jquery multiple function with same variables

Question

I have the following mouseenter/mouseleave function:

$('.obj').on('mouseenter', function(){
    var obj_top = $(this).offset().top,
        obj_max = obj_top + 10;
}).on('mouseleave', function(){
    var obj_top = $(this).offset().top,
        obj_max = obj_top + 50;
});

Since it all happens within the same object, is there anyway I can reuse the obj_top variable throughout the functions without having to duplicate it?

@Hacketo though much better than 80% of the questions here.... — Arun P Johny
– Arun P Johny, Commented Aug 19, 2015 at 11:33
@Popnoodles we can use a .each() loop and use the logic you proposed - ie loop through each obj and create a variable for each one — Arun P Johny
– Arun P Johny, Commented Aug 19, 2015 at 11:40

Arun P Johny · Accepted Answer · 2015-08-19 11:37:40Z

1

You can't because those variables are local to the function scope in which they are declared unless you declare it in a shared scope.

But if you don't want to repeat it again then you can use a single event handler for both mouseenter and mouseleave and check the event.type to see which is the event that caused the trigger based on that decide on the value to be added to the obj_top to find out obj_max

$('.obj').hover(function (e) {
    var obj_top = $(this).offset().top,
        obj_max = obj_top + (e.type == 'mouseenter' ? 10 : 50);
});

edited Aug 19, 2015 at 11:37

answered Aug 19, 2015 at 11:29

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

2 Comments

Popnoodles Over a year ago

@GEspinha For clarity $('.obj').hover(function is the same as $('.obj').on('mouseenter mouseleave', function

gespinha Over a year ago

I guess this solution is much simpler and easy to understand, thanks :)

danielaKay · Accepted Answer · 2015-08-19 11:37:36Z

1

By moving it into a function?

$('.obj').on('mouseenter', function(){
    setVariables(this, 10);
}).on('mouseleave', function(){
    setVariables(this, 50);
});

setVariables = function(sourceElement, amount) {
    var obj_top = $(sourceElement).offset().top,
        obj_max = obj_top + amount;
}

EDIT: Arun P Johny is right, fixed the faulty "this" reference

edited Aug 19, 2015 at 11:37

answered Aug 19, 2015 at 11:30

danielaKay

18911 bronze badges

2 Comments

Arun P Johny Over a year ago

may have to fix this reference

Hacketo Over a year ago

Btw this is not a re-use of obj_top variable. Only re-use of function

Collectives™ on Stack Overflow

Jquery multiple function with same variables

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related