在拉斐尔的一组路径上应用悬停事件

Question

当我将悬停事件放在raphael集上时,效果将应用于每个不同的路径.因此,当我越过路径时,它会更改该单个路径的填充,而不是同时更改整个集合的填充.

例如,在这张地图中,当你用鼠标穿过加拿大时,大陆会改变它的颜色,但是所有的冰岛都保持相同的颜色.

这是我的代码.

drawSets: function(){
    for (country in this.setsArr){
        var setset= R.set();
        var zone = this.setsArr[country];
        for (group in zone){
            var path = R.path(this.setsArr[country][group].path);

            setset.push(
                path
            );
        }

        var attri = this.options.attributes;
        setset.attr(attri);
        var x = this.setsArr[country].translate.x;
        var y = this.setsArr[country].translate.y;
        setset.translate(x,y);

        setset.hover(function(){
            this.animate({
                fill: '#000'
            }, 300);
        }, function(){
        this.animate({
            fill: attributes.fill
        }, 300);
    });

    }   
},

我正在使用Raphaels动画方法.

关于如何解决这个问题的任何想法？

以下是整个应用程序的文件...

http://www.megaupload.com/?d=GHQ5HATI

这是另一个包含这个问题的问题.

有人可以澄清拉斐尔的文件吗？(或知道某人已经完成的地方)

Answer 1

这是一个古老的问题,您用来突出显示的事件并不是指您认为的对象.具体是这个参考.

现在是午夜,我很累,而且我已经搞砸了你的代码.这就是我做的

创建一个对象来包装您的路径集,并设置mouseover事件以引用对象集.这里的神奇之处在于,通过使用对象变量的引用,事件将被锁定到它并且一切正常.

所以.这是对象.我把它放在mapclasses.js的顶部

function setObj(country,myset)
{
    var that = this;
    that.country = country;
    that.myset = R.set();

    that.setupMouseover = function()
    {
        that.myset.mouseover(function(event){
            myvar = that;   
            // in the mouseover, we're referring to a object member that.myset
            // the value is locked into the anonymous object
            that.myset.attr({"fill":"#ffaa00"});
        });
    }

    that.addPath = function(newpath)
    {
       that.myset.push(newpath); 
    }

    return that;
}

然后在函数drawSets(第80行)

drawSets: function(){
    for (country in this.setsArr){
        var setset= R.set();
                    var holderObj = null;
                    //
                    // Create an object to hold all my paths
                    //
                    if (country == 'canada')
                    {
                       holderObj = setObj (country, setset);
                    }
        var zone = this.setsArr[country];
        for (group in zone){
            var path = R.path(this.setsArr[country][group].path);

            setset.push(path);
                            if (country == 'canada')
                            {
                               // add the path to the holder obj
                               holderObj.addPath(path);
                            }
        }

                    if (country == 'canada')
                    {
                       // once all paths for the object are loaded, create a mouseover
                       // event
                       holderObj.setupMouseover();
                    }

        var attri = this.options.attributes;
        setset.attr(attri);
        var x = this.setsArr[country].translate.x;
        var y = this.setsArr[country].translate.y;
        setset.translate(x,y);



    }   
}

注意:我这样做仅适用于加拿大.另外,我只应用了鼠标悬停.应用相关的mouseout应该是微不足道的.此外,您需要为每个国家/地区提供一个对象,您可能希望存储该对象.

对不起,这不是更清楚.正如我所说,现在已经很晚了.如果你愿意,我可以发送修改后的js文件,或者将其粘贴到dropbox上,但这可能违背了StackOverflow的精神.

如果您对此有任何疑问,请随便提出,我会尽力帮忙.

祝你好运.