javascript scope problem

Question

I am using Raphael.js library for a specific work. I am creating circles and binding hover event that show/hide text. The problem is that only the text over last circle is shown/hidden, even i am hovering over other circles. plz chk this code

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

for Raphael.js reference

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

Answer 1

it seems that if you place the text creation inside the hover event itself, it might work a little bit better.

Answer 2

Well, I don't know anything about raphael library, but it would seem that you could wrap your c.hover in a self calling function in order to create a closure that references the proper value of 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 );

This way, when you create your hover event handler, it will pass in the value of t, and reference it inside as the local variable t_local (or whatever name you give it), which will persist until (and after) the handler is called.

So the full code would be:

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

---

EDIT: You could wrap the entire inside of the for() statement instead, but I don't think it will make a difference to the specific Chrome issue you mentioned in your comment below.

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 3

It looks like variable t isn't just the object, it's also got hide(). Just looking at the code, I'm not sure what to expect from calling a show() or hide() method on it elsewhere.

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