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 函数中的节点[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

这是一个通过闭包将额外的东西传递给事件处理程序/回调的 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 回答
0

事件处理程序中的范围更改。尝试在 for 循环之外声明和定义节点和 mouseover/out 函数。然后使用鼠标事件的函数名称： .mouseover(myFunctionDefinedOutsideForloop);

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