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

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< /a>

Answer 1

好吧，我对 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 );         
}

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