0

我对 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");
        }
    );
}

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

我试图打印 and 的值，DIMENSIONS[key]['dimCode']它们DIMENSIONS[key]['areaCode']是正确的。任何想法为什么我的代码不能按预期工作？

4

5 回答 5

3

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

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

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

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

于 2012-06-22T13:55:32.437 回答
2

因为key作为循环变量不能在你的闭包中被引用。

于 2012-06-22T13:53:41.057 回答
2

不完全适合您当前的情况，但我建议您使用 key 和 dimCode 作为键值对，而不是创建二维数组。

这应该可以正常工作：

var DIMENSIONS = {
    'author_dimension' : $('#quarter_circle_top_left'),
    // ... so on
};

因此您可以通过以下方式访问它：

$('div[id*="_dimension"]').hover(function () {
    DIMENSIONS[this.id].addClass('hover');  
}, function () {
    DIMENSIONS[this.id].removeClass('hover');
});

看起来不那么复杂，而且您不必在每次执行悬停时都进行 jQuery 选择。

于 2012-06-22T13:56:53.100 回答
1

http://jsfiddle.net/iambriansreed/YfhYk/

for (key in DIMENSIONS) {
    if(!DIMENSIONS.hasOwnProperty(key)) continue;  

    $("#" + DIMENSIONS[key].dimCode)
    .data('areaCode', DIMENSIONS[key].areaCode)
    .hover(function() {
        $("#" + $(this).data('areaCode')).addClass("hover");
    },function() {       
        $("#" + $(this).data('areaCode')).removeClass("hover");
    });
}​
于 2012-06-22T14:03:52.690 回答
0

因为key是在循环运行时定义的。当实际的 Hover 事件发生时，它不会设置为相同的值。

于 2012-06-22T13:55:33.460 回答