Question

我在一个节点数组上有一个循环，我试图将每个节点的名称显示为屏幕上某些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]）传递给函数吗？那怎么用呢？

Answer 1

循环完成后调用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 });

这一切都取决于最适合你的目的。

Answer 2

范围在事件处理程序中更改。尝试在for循环外声明和定义节点和鼠标悬停/输出功能。然后使用鼠标事件的函数名称：.mouseover（myFunctionDefinedOutsideForloop）;

var myFunctionDefinedOutsideForloop = function(){
    this.animate({"fill-opacity": .4}, 500);
    this.attr({title:nodes[i].name});
}

Answer 3

这是一个通过闭包将其他内容传递给事件处理程序/回调的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") });
    }
}

将参数传递给Raphael.js中的.mouseover函数

3 个答案: