Hover array element to fade corresponding element in another array [Closure issue]

Question

What I'm hoping to achieve is when I hover over an element in the deptmts array, the corresponding element in the brnches array is then faded in and out. I've added below what I thought it should be but not really sure where I'm going wrong. Any help would be much appreciated.

var brnches = ["#branch01","#branch02","#branch03","#branch04"]
var deptmts = ["#depart01","#depart02","#depart03","#depart04"]

var brchhov = function() {
    for(var i=0; i<deptmts.length; i++){
        $(deptmts[i]).hover(
            function(){$(brnches[i]).stop(true).fadeTo("fast", 1);},
            function(){$(brnches[i]).stop(true).fadeTo("slow", 0);}
        );
    }
};

Just an off topic note, why use brnches & deptmts instead of branches and departments as variables? Good and clear variable names can go such a long way in explaining code. — Morgan Wilde
– Morgan Wilde, Commented Nov 21, 2012 at 22:50
@MorganWilde: Sorry yes you're right, I should have changed these after copying it all in. I shortened them just for my personal preferences, keeping the same length of chars. On the plus side you still understood what they meant :) ...but yes it's bad practise. — dev
– dev, Commented Nov 21, 2012 at 23:12

Sushanth -- · Accepted Answer · 2012-11-22 00:11:28Z

10

Classic closure Issue..

var brchhov = function() {
    for(var i=0; i<deptmts.length; i++){
       (function(num){
             $(deptmts[num]).hover(
                 function(){$(brnches[num]).stop(true).fadeTo("fast", 1);},
                 function(){$(brnches[num]).stop(true).fadeTo("slow", 0);}
             );
       })(i);
    }
};

Check Fiddle

edited Nov 22, 2012 at 0:11

answered Nov 21, 2012 at 22:49

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

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

6 Comments

Nope Over a year ago

+1 as it does answer the requirement

...when I hover over an element in the deptmts array, the corresponding element in the brnches array is then faded in and out.

@vletech: As a side-note there is no correlation between the hovered department and the faded branch other than that you rely on them being in the matching/required order. If you find your branches are not always in the same index/order as the departments you will need to match them by something more reliable than the element index.

dev Over a year ago

@Sushanth: Thank you that worked perfectly, I'm still learning so this is one I'll remember.

dev Over a year ago

@FrançoisWahl: You're right I was relying on them being in the same order for both of the arrays, hopefully I won't have to change this.

Sushanth -- Over a year ago

@vletech .. Glad to have Helped :) .. FrançoisWahl Thanks for pointing at the issue..

Sushanth -- Over a year ago

@vletech .. You can store the corresponding index or id of brnches in the data attribute of deptmts

|

Collectives™ on Stack Overflow

Hover array element to fade corresponding element in another array [Closure issue]

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related