SVG - 拉斐爾：存儲選擇，從而最後的路徑元素的數據可以被改變

The current state SVG - 拉斐爾：存儲選擇，從而最後的路徑元素的數據可以被改變

由於從我的鏈接，您可以在地圖上選擇不同的區域，一切都似乎是工作，直到你重新選擇，你選擇了一個縣之前。每個路徑存儲的數據值決定它是否爲isSelected或notSelected。我在改變元素數據時沒有問題，只需點擊this，但我找不到一種方式來存儲所選的最後一個元素，以便我可以更改元素數據。這意味着我首先必須點擊先前的縣來將其元素數據設置爲notSelected

首先我定義了var currentcountyselected = "";。這允許我存儲paths[arr[this.id]].name;。當我點擊一個新的路徑時，我可以使最後的路徑填充改變$('#'+currentcountyselected).attr({fill: attributes.fill});

在Raphael的for循環中，我設置了obj.data('selected', 'notSelected');，所以所有路徑元素都設置爲notSeelected。

所以我需要的是一些方法來存儲路徑的最後一個，所以我可以改變它的元數據

這是活生生的例子清理點擊功能。

obj.click(function(){ 
if(this.data('selected') == 'notSelected') 
    {this.animate({fill: '#698B22' }, 300);     
    this.data('selected', 'isSelected'); 
    $('#'+currentcountyselected).attr({fill: attributes.fill}); 
    paths[arr[this.id]].value = "isSelected"; 
    currentcountyselected = paths[arr[this.id]].name; 
    } 
else 
    {this.animate({fill: '#32CD32'}, 300);     
    paths[arr[this.id]].value = "notSelected"; /* set path value*/ 
    this.data('selected', 'notSelected');      
    } 
});/* end mark selections */

我一直在這個項目上工作了一段時間，客戶端現在希望接口的工作方式不同。這真的讓我的時間吃光了。

編輯：
雖然我已經通過簡單地取出if/else我還是想知道如何在元素的數據在之前的路徑（或與此有關的任何路徑）得到找到了解決辦法。

來源

2012-06-22 chris loughnane

我可能無法正常看到的併發症，但你爲什麼不只是存儲lastcountyselected和更新它與你更新與新價值currentcountyselected currentcountyselected之前的現值值。然後你可以輕鬆地修改你點擊的最後一件事。 – amadan

@amadan你好，它處理SVG對象路徑很複雜。我按照你的建議，按照我想要的方式工作，點擊： 'paths [previouscountyselected] .value =「notSelected」; paths [arr [this.id]]。value =「isSelected」;' 問題是要弄清楚如何獲取每個svg對象中的數據。 –

這是我的解決方案，張貼，因爲它可能有助於某人。 我的問題中的鏈接在點擊快樂用戶方面存在問題。

全局

var previouscountyselected = "Mayo"; /* default start, can be any county(path) */ 
var start = true; 
var past = null;

更改代碼

obj.click(function(){ 
if(paths[arr[this.id]].value == 'notSelected') 
    { 
    this.animate({fill: '#698B22'}, 200); 
    paths[previouscountyselected].value = "notSelected"; 
    paths[arr[this.id]].value = "isSelected"; 
    previouscountyselected = paths[arr[this.id]].name; 

    if (!start && past != this) 
     { 
      past.animate({ fill: '#fff' }, 200); 
     } 
    past = this; 
    start = false;     
} 
else if(paths[arr[this.id]].value == 'isSelected') 
{ 
    this.animate({fill: '#32CD32'}, 200); 
    paths[arr[this.id]].value = "notSelected"; /* set path value */ 
} 
});

概述 if (!start && past != this)是有點不尋常，並且需要或動畫漸變搞的一團糟和波濤洶涌。如果第一次點擊路徑，並且如果您在一條路徑上單擊錘擊，它不會褪色爲白色，則不會觸發淡入淡出。主要if/else處理實際控制值。直到我得到一個jsfiddle這個鏈接將演示所需的行爲。

注意！此鏈接中的下拉菜單不起作用。

Click happy friendly

來源

2012-06-25 16:53:56

SVG - 拉斐爾：存儲選擇，從而最後的路徑元素的數據可以被改變

回答

相關問題