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>

私が欲しいのは、「次元」の1つ（後の4 div）にカーソルを合わせると、四分円の1つ（最初の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 (var key in DIMENSIONS) {
    $("#" + DIMENSIONS[key]['dimCode']).hover(
        function() {
            $("#" + DIMENSIONS[key]['areaCode']).addClass("hover");
        }, 
        function() {
            $("#" + DIMENSIONS[key]['areaCode']).removeClass("hover");
        }
    );
}

この種の作業ですが、「寸法」はそれぞれの四分円を強調表示せず、代わりにそれらのいずれかにカーソルを合わせると、最後（左下）の四分円のみが強調表示されます。したがって、作成者の「寸法」にカーソルを合わせると、左上の4分の1の円が強調表示されますが、代わりに最後の1つ（左下）のみが強調表示されます。

との値を出力しようとしました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

現在の状況を正確に修正するわけではありませんが、2D配列を作成する代わりに、キーと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 に答える
2

なぜならkey、ループ変数はクロージャで参照できないからです。

于 2012-06-22T13:53:41.057 に答える
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ループの実行時に定義されるためです。実際のホバーイベントが発生した場合、同じ値に設定されていません。

于 2012-06-22T13:55:33.460 に答える