我正在使用 Raphael.js 库进行特定工作。我正在创建显示/隐藏文本的圆圈和绑定(bind)悬停事件。问题是只有最后一个圆圈上的文字显示/隐藏,即使我将鼠标悬停在其他圆圈上也是如此。
这是我的代码:
for(var i=0; i<feedData.length; i++){
var x = ((i+1)*diff);
var t = r.text(x, 120, feedData[i].title).hide();
var c = r.circle(x,150,10);
c.attr({fill: "red"});
c.attr({stroke: "red"});
c.attr({title: feedData[i].title});
c.hover(function (event) {
this.animate({r: 13}, 200);
t.show();
}, function (event) {
this.animate({r: 10}, 200);
t.hide();
});
}
Raphael.js 引用
最佳答案
嗯,我对 raphael 库一无所知,但看起来你可以将 c.hover
包装在一个自调用函数中,以创建一个引用正确值的闭包t
.
(function( local_t ) {
c.hover(function (event) {
this.animate({r: 13}, 200);
local_t.show();
}, function (event) {
this.animate({r: 10}, 200);
local_t.hide();
});
})( t );
这样,当您创建hover
事件处理程序时,它将传入t
的值,并在内部引用它作为局部变量t_local
(或您给它的任何名称),它将持续到(和之后)调用处理程序。
所以完整的代码是:
for(var i=0; i<feedData.length; i++){
var x = ((i+1)*diff);
var t = r.text(x, 120, feedData[i].title).hide();
var c = r.circle(x,150,10);
c.attr({fill: "red"});
c.attr({stroke: "red"});
c.attr({title: feedData[i].title});
(function( local_t ) {
c.hover(function (event) {
this.animate({r: 13}, 200);
local_t.show();
}, function (event) {
this.animate({r: 10}, 200);
local_t.hide();
});
})( t );
}
编辑:您可以将整个 for()
语句包裹起来,但我认为这不会对特定的 产生影响您在下面的评论中提到的 Chrome
问题。
for(var i = 0; i < feedData.length; i++){
(function( local_i ) {
var x = ( ( local_i + 1) * diff );
var t = r.text(x, 120, feedData[ local_i ].title).hide();
var c = r.circle(x, 150, 10);
c.attr({fill: "red"});
c.attr({stroke: "red"});
c.attr({title: feedData[ local_i ].title});
c.hover(function (event) {
this.animate({r: 13}, 200);
local_t.show();
}, function (event) {
this.animate({r: 10}, 200);
local_t.hide();
});
})( i );
}
关于JavaScript 作用域问题导致只有一个绑定(bind)起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3701906/