2

I am trying to write a system that will generate and populate a form with some text stored in several objects in an array.

I loop through the array, and then through the number of rows in the description to add some breaks so that two other columns line up with the first row of each group.

All the text is in one of 3 divs that are positioned above a bunch of other divs with borders. These draw lines to visualize the form boxes.

Each time one of these background divs is created I give it a class "i" from the for loop. Thus grouping them all to the current object. This way when I hover over any one of the boxes it highlights them all as one group.

My problem is that when I hover over any div it says "i" is equal to 6. (I have 6 items total 0-5 in the array). It should echo 0-5 depending on what "i" was in the loop at the time they were bound.

If I move my .hover() call into a separate function (outside of the for loop) and then call that function in the same place like setHover(i); it works.....

This is probably something really obvious but I'm really confused by this behavior. Any help would be much appreciated.

for(i=0; i<g_workEntries.length; i++)
    {
        curEntry = g_workEntries[i];  //current object
        rowCount = curEntry.numRows;  // total number rows for this object

        //add the big block of description text
        $('#descriptionText').append('<div>'+curEntry.description+'</div><br/>');

         if(curEntry.price != null) 
         {  
            $('#priceText').append('$'+curEntry.price); //If there is a price add it
         }

        if(curEntry.workCode != null) 
        {
            $('#workCodesText').append(curEntry.workCode);//If there is a work id add it
        }

        for(x=0; x < rowCount; x++)
        {
            generateRow(''+i); //generate a background row (what the text sits on & gets highlited on hover).

            $('#priceText').append('<br/>');     //add a break for  the first lien & every subsequent line of the description.
            $('#workCodesText').append('<br/>'); 
        }


        console.log('added hover for: '+i); //<-- this works and says 0-5

        //////////THIS CAUSES THE ISSUE////////
        ///It always echos 6 whenever I hover
        ///It should be echoing 0-5 depending
        ///on what row group gets passed (i)

        $('.'+i).hover(
            function(){console.log(i+' ON');},
            function(){console.log(i+' OFF');}
        );
    }
Talha Awan
  • 4,573
  • 4
  • 25
  • 40
Greg G
  • 697
  • 2
  • 8
  • 17
  • 1
    Do note that classes and IDs in CSS should not begin with a numerical character - instead, it should begin with a dash, an underscore or any alphabetical character. See more here: http://stackoverflow.com/a/449000/395910 – Terry Dec 28 '13 at 12:09
  • 1
    Thanks for the advice Terry, I will change that. Good link Zaheer – Greg G Dec 28 '13 at 12:15

1 Answers1

3

This is what is called a closure.You should enclose it in another scope:

for(var i =0 i<n;i++)
{

  (function(index){

    $('.'+index).hover(function(){
        console.log(index);
    })
  })(i)
}

EDIT: As Bill Criswell pointed out, since you're using jQuery you can enclose the scope using $.each function to iterate through an array instead of using for statement:

$.each( g_workEntires, function( index, curEntry ){ ... });

The thing that happens is that the loop is finished long time before the hover function callback is called. In javascript variables have function scope, not block scope. So the var i, has the value = 6 when the loop finishes, and after some time the hover callback is called and finds the i variable with the value of 6.

Emil Condrea
  • 9,705
  • 7
  • 33
  • 52