Question

我正在使用Raphael.js库进行特定的工作。我正在创建圈子和绑定悬停事件，显示/隐藏文本。问题是只显示/隐藏了最后一个圆圈上的文字，即使我在其他圆圈上空盘旋。

这是我的代码：

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

Answer 1

好吧，我对raphael库一无所知，但似乎你可以将c.hover包装在一个自调用函数中，以便创建一个引用{{1}的正确值的闭包。 }。

这样，当您创建(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

Answer 2

似乎如果你将文本创建放在悬停事件本身中，它可能会更好一些。

Answer 3

看起来变量t不仅仅是对象，它还有hide()。只是查看代码，我不确定在其他地方调用show()或hide()方法会有什么期望。

for(var i=0; i<feedData.length; i++){               
            var x = ((i+1)*diff);
            var t = r.text(x, 120, feedData[i].title); //remove hide() method
            var c = r.circle(x,150,10);
            c.attr({fill: "red"});
            c.attr({stroke: "red"});
            c.attr({title: feedData[i].title});
            t.hide() //try it here instead?
            c.hover(function (event) {
                this.animate({r: 13}, 200);
                t.show();
            }, function (event) {
                this.animate({r: 10}, 200);
                t.hide();
            });             
        }

JavaScript范围问题导致只有一个绑定工作

3 个答案: