gpt4 book ai didi

JavaScript 作用域问题导致只有一个绑定(bind)起作用

转载 作者:行者123 更新时间:2023-11-29 09:59:43 24 4
gpt4 key购买 nike

我正在使用 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 引用

http://raphaeljs.com/reference.html#events

最佳答案

嗯,我对 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com