將參數傳遞給Raphael.js中的.mouseover函數

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); 
    } 

然而，結點[I]在.mouseover功能是不確定的（爲什麼？） 我可以某種方式傳遞它像.mouseover（節點[I] ）的功能？那我該如何使用它？

Answer 1

你mouseover函數被調用，因此i也不復存在。一個簡單而靈活的解決方案是採取拉斐爾的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/out函數。然後使用鼠標事件的函數名稱：.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") }); 
    } 
}