Проблема с областью JavaScript вызывает только одну привязку к работе - PullRequest
Новая
       1

Проблема с областью JavaScript вызывает только одну привязку к работе

3 голосов
/ 13 сентября 2010

Я использую библиотеку 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

Ответы [ 3 ]

5 голосов
/ 13 сентября 2010

Ну, я ничего не знаю о библиотеке Рафаэля, но может показаться, что вы могли бы обернуть свой 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 );         
}
0 голосов
/ 13 сентября 2010

Похоже, переменная 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();
            });             
        }
0 голосов
/ 13 сентября 2010

кажется, что если вы поместите создание текста внутри самого события наведения, оно может работать немного лучше.

...