1

ノードのリストがあり、ラファエル オブジェクトを使用して各ノードを描画します。次のループがあります。

for(var i=0; i<curNodes.length; i++){
    var node = curNodes[i];
    var obj = paper.rect(node.getX(), node.getY(), node.width, node.getHeight())
   .attr({fill:nodes[i].getColor(), "fill-opacity": 0.6})
   .click(function(e){ onMouseClicked(i,e); });
}

クリックすると、curNodes 配列の 'i' 番目の要素に関連付けられたデータを表示できる関数を呼び出したいと思います。ただし、常に最後の「i」がこの関数に渡されます。私の機能は次のとおりです。

var onMouseClicked = function(i, event){
switch (event.which) {
    case 1:
        this.attr({title: curNodes[i].name});
        break;
    }
}

関数を呼び出すときに正しいインデックスにアクセスするにはどうすればよいですか?

4

2 に答える 2

3

これを試して：

.click((function (i) {
    return function (e) {
        onMouseClicked(i,e);
    };
})(i));

お気づきのように、(または関数内のパラメーター) の値は、ループiからの最後のインデックスです。forこれは、clickイベントがすぐに発生しないためです。バインディングは発生しますが、値はiキャプチャされません。clickハンドラーが実際に実行されるまで(click何らかの方法でイベントがトリガーされたとき)、forループは完了しており (かなり前に)、 の値iはループの最終値です。i上記のようなクロージャでの値を取得できます。

私は別の処理方法を知っていますが、私の意見ではよりクリーンなのは、次を使用することです。

.click(clickHandler(i));

function clickHandler(index) {
    return function (e) {
        onMouseClicked(i, e);
    };
}
于 2013-04-25T04:03:01.577 に答える
2

これは、クロージャ変数が原因ですi。

for (var i = 0; i < curNodes.length; i++) {
    (function(i) {
        var node = curNodes[i];
        var obj = paper.rect(node.getX(), node.getY(), node.width,
                node.getHeight()).attr({
                    fill : nodes[i].getColor(),
                    "fill-opacity" : 0.6
                }).click(function(e) {
                    onMouseClicked(i, e);
                });
    })(i);
}
于 2013-04-25T04:03:07.310 に答える