This question is related to one I asked previously at Using Mouseenter / MouseLeave to Change Div in JavaScript.
As answered, I had an index closure problem. I had a new function use an existing index, and the answer provided made perfect sense - except for one part.
After this:
for (var i = 0; i < radialDivList.length; i++) {
if (!radialDivList[i]) continue; //skip null, undefined and non-existent elements
if (!radialDivList.hasOwnProperty(i)) continue; //skip inherited properties
smallID[i] = radialDivList[i].id; //assign the list of four divs to the smallID array;
largeID[i] = smallID[i] + 'Full'; // add "Full" to each smallID element to make a largeID element
}
I had
$('#' + smallID[i]).mouseenter(function () { //works for all four radial menu divs when mouse enters
alert(largeID[i]); // undefined
alert(largeID); // gives expected output of full array
I now understand why the largeID index is undefined, but I don't understand why the mouseenter function works for all four radial menu items. My understanding of index closure makes me think that the value of [i] for the smallID[i].mouseenter function will be "3", given the result of the previous for loop. If so, why do all four menu sections trigger a mouseenter event properly?
Thanks for any help you are willing to provide!
@programmerGuy - care to further your explanation from the previous question?