JavaScript for..in 和 enum 奇怪的行为

Question

我对 JavaScript 中 for..in 循环的奇怪行为遇到了麻烦。我有以下 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>

我想要的是，当我将鼠标悬停在其中一个“维度”(后 4 个 div)上时，其中一个四分之一圆(前 4 个 div)将突出显示。我在 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"}
};

这个 for..in 循环应该突出显示:

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

这种方法可行，但发生的情况是“尺寸”不会突出显示相应的四分之一圆，而是将鼠标悬停在其中任何一个上仅突出显示最后一个(左下角)四分之一圆。因此，当我将鼠标悬停在作者“维度”上时，我希望左上角的四分之一圆突出显示，但只有最后一个(左下角)突出显示。

我尝试打印 DIMENSIONS[key]['dimCode'] 和 DIMENSIONS[key]['areaCode'] 的值，它们是正确的。知道为什么我的代码不能按预期工作吗？

Answer 1

正如@Cranio所说，这是循环/闭包问题。

由于您使用的是 jQuery，因此可以使用 $.each:

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

额外函数作用域的引入避免了循环/闭包问题。