2

ノードの配列にループがあり、画面上のいくつかのRaphael要素のツールチップとして各ノードの名前を表示しようとしています。

これが私のコードです：

for(var i=0; i<nodes.length; i++){
       paper.rect(nodes[i].getX(), nodes[i].getY(), nodes[i].width, nodes[i].getHeight())
            .attr({fill:nodes[i].getColor(), "fill-opacity": 1}).mouseover(function () {
                    this.animate({"fill-opacity": .4}, 500);
                    this.attr({title:nodes[i].name});
            }).mouseout(function () {
                this.animate({"fill-opacity": 1}, 500);
            }).drag(move, dragstart, dragend);
    }

ただし、.mouseover関数のnodes [i]は未定義です。（なぜ？！）。mouseover（nodes [i]）のように関数に渡すことはできますか？では、どうすればそれを使用できますか？

4

3 に答える 3

2

ループmouseoverが完了した後に関数が呼び出されるため、関数はi存在しなくなります。シンプルで柔軟な解決策は、Raphaelのdata()方法を利用して、必要なものを保存することです。

paper.rect(nodes[i].getX(), nodes[i].getY(), nodes[i].width, nodes[i].getHeight())
    .attr({fill:nodes[i].getColor(), "fill-opacity": 1})
    .data({"title": nodes[i].name})
    .mouseover(function () {
          this.animate({"fill-opacity": .4}, 500);
          this.attr({title: this.data("title") });
    }).mouseout(function () {
          ...

もちろん、これを好みに合わせて変更できます。

.data({"index": i})
...
this.attr({title: nodes[this.data("index")].name });

または、複数のプロパティが必要な場合は、オブジェクト全体を保存するだけです。

.data({"node": nodes[i]})
...
this.attr({title: this.data("node").name });

それはすべて、あなたの目的に最も適したものに帰着します。

于 2013-03-16T20:08:36.480 に答える
0

イベントハンドラーでスコープが変更されます。forループの外側でノードとマウスオーバー/出力関数を宣言して定義してみてください。次に、マウスイベントの関数名を使用します。.mouseover（myFunctionDefinedOutsideForloop）;

var myFunctionDefinedOutsideForloop = function(){
    this.animate({"fill-opacity": .4}, 500);
    this.attr({title:nodes[i].name});
}
于 2013-03-15T18:21:56.243 に答える
0

クロージャを介してイベントハンドラー/コールバックに追加のものを渡すためのJavaScriptのトリックは次のとおりです。

paper.rect(nodes[i].getX(), nodes[i].getY(), nodes[i].width, nodes[i].getHeight())
    .attr({fill:nodes[i].getColor(), "fill-opacity": 1})
    .data({"title": nodes[i].name})
    .mouseover(handleMouseOver(dataYouWant))
    .mouseout(function () {
    ...

function handleMouseOver(dataYouWant) {
    return function(){
      // use dataYouWant in your code
      this.animate({"fill-opacity": .4}, 500);
      this.attr({title: this.data("title") });
    }
}
于 2013-11-05T00:22:38.467 に答える