Question

The current state

As from my link you can pick different regions on the map and everything seems to be working until you re-select a county you have selected before. Data values stored with each path decide if it isSelected or notSelected. I have no problem in changing the element data just clicked with this but I can’t find a way of storing the last element selected in a way that I can change it’s element data. Which means I first have to click on the previous county to set it’s element data to notSelected

First I define var currentcountyselected = "";. This allows me to store the paths[arr[this.id]].name;. When I click on a new path I can make the last path fill change with $('#'+currentcountyselected).attr({fill: attributes.fill});

In Raphael’s for loop I set obj.data('selected', 'notSelected'); so all path elements are set to notSeelected.

So what I need is some way to store the last path so I can change it’s element data

This is the click function cleaned up from live example.

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 */

I’ve been working on this project for a while and the client now wants the interface to work differently. This has really ate up my hourse.

---

EDIT:
Although I have found a solution by simply taking out the if/else I would still like to know how to get at element data in a previous path (or any path for that matter).

Answer 1

Here is my solution, posted as it might help someone. The link in my question has problems with click happy users.

---

Globals

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

Changed code

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

Overview
if (!start && past != this) is a little unusual and is required or animated fades get messed up and choppy. The fade is not triggered if it is the first time a path is clicked and if you just hammer clicks on one path it doesn’t fade to white. The main if/else handles the actual control value.
Until I get a jsfiddle up this link will demonstrate the desired behaviour.

---

Note! the drop menu in this link does not work.

Click happy friendly