Hover array element to change the corresponding element in another array [Closing issue]

Question

What I hope to achieve is when I attach an element in the deptmts array, the corresponding element in the brnches array then disappears and disappears. I added below what I thought should be, but not quite sure where I am going wrong. Any help is 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);} ); } }; 

Answer 1

The classic closure problem.

 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 feed