在Raphael上的一組路徑中應用懸停事件

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

這裏是包含這一個另一個問題。

Can someone clarify Raphael's documentation? (or know a place in which someone already has done it)

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



    } 
} 

注意的頂部：我爲加拿大隻有做到了這一點。另外，我只應用了鼠標懸停。應用關聯的鼠標應該是微不足道的。此外，您還需要爲每個國家/地區需要一個對象，您可能需要存儲該對象。

對不起，這不是更清楚。正如我所說，已經很晚了。如果你願意的話，我可以給你發送修改過的js文件，或者將它粘貼到Dropbox上，但這可能違背了StackOverflow的精神。

如果您遇到任何問題，請提出問題，我會盡力提供幫助。

祝你好運。