Question

I have trouble with strange behavior of for..in cycle in JavaScript. I have the following HTML:

<div id="quarter_circle_top_left">...</div>
<div id="quarter_circle_top_right">...</div>
<div id="quarter_circle_bottom_right">...</div>
<div id="quarter_circle_bottom_left">...</div>    

<div id="author_dimension"></div>
<div id="similar_dimension"></div>
<div id="citation_dimension"></div>
<div id="concept_dimension"></div>

What I want is that when I hover over one of the “dimensions” (the latter 4 divs) one of the quarter circles (the first 4 divs) will be highlighted. I have the following enum in JS:

var DIMENSIONS = {
    DIM_AUTHORS: {value: 1, dimCode: "author_dimension", areaCode: "quarter_circle_top_left"},
    DIM_SIMILAR: {value: 2, dimCode: "similar_dimension", areaCode: "quarter_circle_top_right"},
    DIM_CITATIONS: {value: 3, dimCode: "citation_dimension", areaCode: "quarter_circle_bottom_right"},
    DIM_CONCEPTS: {value: 4, dimCode: "concept_dimension", areaCode: "quarter_circle_bottom_left"}
};

And this for..in cycle which should do the highlighting:

for (var key in DIMENSIONS) {
    $("#" + DIMENSIONS[key]['dimCode']).hover(
        function() {
            $("#" + DIMENSIONS[key]['areaCode']).addClass("hover");
        }, 
        function() {
            $("#" + DIMENSIONS[key]['areaCode']).removeClass("hover");
        }
    );
}

This sort of works but what happens is that the “dimensions” don’t highlight the respective quarter circle but instead hovering over any of them highlights only the last (bottom left) quarter circle. So when I hover over authors “dimension” I expect the top left quarter circle to be highlighted but instead only the last one (bottom left) is highlighted.

I tried to print the values of DIMENSIONS[key]['dimCode'] and DIMENSIONS[key]['areaCode'] and they are correct. Any ideas why my code doesn’t work as expected?

Answer 1

As @Cranio says, it’s the loop/closure problem.

Since you’re using jQuery, you can use $.each:

$.each(DIMENSIONS, function(key, value) {
    // use value['dimCode'] instead of DIMENSIONS[key]['dimcode']
    ...
});

The introduction of the additional function scope avoids the loop/closure problem.