Thread

I’m trying to write a function to set display of containers when hovering over another element.

I have an unordered list with 5 list items each of which, when hovered, should trigger the display of a corresponding div.

I can get each of the individual portions of this to function;i.e. the “hover function” on it’s own, and the “for loop” on it’s own. But when combined, my counting variable (when placed within the hover function, has a fixed value of “6” though the loop iterates the expected number of times “5”.

How do I pass the variable so that it will increment properly?

$(document).ready(function() { 
    myDivs = '5';
    for(z=1;z<=myDivs;z++){
        alert('#div_'+ z); //Test for value: here z increments
        $('li').hover(
            function() {
                $('#div_'+ z).addClass("hover");
                alert('#div_'+ z);  //Test for value: here z equal to 6 all the time ???
            }, 
            function() {
                $('#div_'+ z).removeClass("hover");
            }
        );
    }
});

Any advice for the programmaticlly challenged designer would be much appreciated.

Thanks.

not sure if I’m making progress but it looks like I need to declare a variable within the for loop to represent my counter; like

$(document).ready(function() { 
    myDivs = '5';
    for(z=1;z<=myDivs;z++){
        count = z; // new counter variable
        alert('#div_'+ count); // variable increments
        $('li').hover(
            function() {
                alert('#div_'+ count); // variable now equal to 5 for every iteration ???
                $('#div_'+ count).addClass("hover");
            }, 
            function() {
                $('#div_'+ count).removeClass("hover");
            }
        );
    }
});

I’m still a bit lost as to why may variable is not increasing in value with “z”.

Hello Hothouse,

I thinkg the fundamental issue is that you shouldn’t even be doing a loop. jQuery works like they advertise “Select and Do”.
Now you are selecting all LI elements , attaching the hover function with z=1 to all elements. Then you are attaching the hover function to all elements with z=2, essentially overwriting the first itteration etc… That is why you end up with all elements being z=5 in the end.

Remember, jQuery applies all the DO stuff to all the selected elements. Technically it internally iterates over all selected elements, so you get the feeling that all you need is: select and do.
Have a look at the first few posts in at learningjquery.com to get a better feel for it.

There are several ways to solve your issue, but since what you do sounds awfully much like a tab like structure have a look at http://docs.jquery.com/UI/Tabs before spending too much time re-inventing the wheel.

Hey, funny you’re suggesting tabs. I hadn’t thought of what I’m doing in that way simple because the end display is much, much, different.

I did, with the assistance of someone else, end up with a solution.

$(document).ready(function() { 
$(function(){
    $.each(new Array(5), function(i){
        $('#li_'+ i).hover((function(i){
                return function() {
                    $('#div_'+ i).addClass("hover");
                }
            })(i),
            (function(i){
                return function() {
                    $('#div_'+ i).removeClass("hover");
                }
            })(i)
        );
    });
});

Given my relative lack of experience with writing functions from scratch I put this together as a test case but ultimately this will get used.

Thanks for the suggestions.