Question

var shapes = new Array();
var kx=50,ky=150;
var RecWidth=120;
var RecHeight=85;
var RecRadius=10;

r = Raphael(10,10, '60%', '100%');

for (var i=0; i<= 10; i++) {

 shapes[i]=r.rect(kx, ky, RecWidth, RecHeight,RecRadius);

 shapes[i].id="keylist"+i ;

 kx=kx+50;

 ky=ky+150;

}

上面的代码将在页面上生成10个Raphael rect，其中包含不同的id。现在我想在鼠标点击或悬停事件中检索id，即keylist，以便根据Keylist我想显示一个弹出窗口，其中包含与此键列表相关的更多信息。

我的问题是，当对象存储在数组中时，我不知道如何在点击/悬停时检索Raphael对象id，这里的数组是Shapes？。

Answer 1

如果我正确理解您的问题，您可以像这样定义click或hover事件处理程序：

for (var i=0; i<= 10; i++) {    
 shapes[i]=r.rect(kx, ky, RecWidth, RecHeight,RecRadius);    
 shapes[i].id="keylist"+i;
 shapes[i].click(handleClick);
 shapes[i].hover(handleHoverIn, handleHoverOut);
 kx=kx+50;    
 ky=ky+150;    
}

function handleClick() {
    var id = this.id; // get your id
    // do something with your id    

}

// mouse enters the rectangle
function handleHoverIn() {
    var id = this.id; // get your id
    // do something with your id    

}

// mouse leaves the rectangle
function handleHoverOut() {
    var id = this.id; // get your id
    // do something with your id    

}

更新：

也许这jsFiddle会有所帮助。

当对象存储在数组中时，如何在单击/悬停时检索Raphael对象id

1 个答案: