Цепочки событий jQuery вместе с Рафаэлем/Mapael

Question

Я использую Mapael, плагин Рафаэля, чтобы создать интерактивную карту. Я хочу покрасить одну область карты при щелчке, а затем, когда область будет нажата, верните ее обратно к цвету по умолчанию. Вот plnk;

http://plnkr.co/edit/VNUYsO0TeX7AIdLqLjiG

Как вы можете видеть, вы только можете нажать на одну часть карты. Однако проблема заключается в том, что вы используете элемент списка. Я хотел бы, чтобы обе функции работали вместе, поэтому может быть только одна область карты, отображающая зеленый цвет в любой момент времени.

Вот код, который, я думаю, необходимо изменить;

JavaScript:

var green = "#9FCC3B"; 
var grey = "#ededed"; 
var previousSelectedElementId = null; 

    $("ul#countries li a").click(function() { 
    var updatedOptions = { 
     'areas': {} 
     }, 
     inputVal = $(this).attr("map") 

    if (previousSelectedElementId !== null) { 
     updatedOptions.areas[inputVal] = { 
     attrs: { 
      fill: grey 
     } 
     } 

    } 

    if (inputVal) { 
     updatedOptions.areas[inputVal] = { 
     attrs: { 
      fill: green 
     } 
     }; 
     previousSelectedElementId = inputVal; 
    } else { 
     updatedOptions.areas[inputVal] = { 
     attrs: { 
      fill: grey 
     } 
     }; 
     previousSelectedElementId = null; 
    } 


    $(".mapcontainer").trigger('update', [updatedOptions, {}, 
     [] 
    ]); 

    $("#selectCountry").html($(this).text()) 
    }); 

HTML:

<ul> 
    <li><a href="#" id="selectCountry">France</a> 
     <ul id="countries"> 
     <li><a href="#" map="BE">Belgium</a></li> 
     <li><a href="#" map="FR">France</a></li> 
     <li><a href="#" map="NL">Netherlands</a></li> 
     </ul> 
    </li> 
    </ul> 

В настоящее время, когда элемент списка щелкнул он принимает атрибут карты, которые являются такими же, как идентификаторы пути в файле map.js, а затем использует updateOptions для выполнения изменения цвета.

Я не уверен Если я могу повторно использовать предыдущийSelectedElementId для репликации той же функции, которая работает с событием click?

Надеюсь, я достаточно хорошо объяснил проблему, если требуется дополнительная информация, я могу предоставить по мере необходимости.

Приветствия

---

EDIT:

Я играл с ним вокруг немного больше, и мысли о возможности привязки выбор для скрытого текстового поля и с помощью обработчика .one? К сожалению, я не могу заставить его работать, но вот PLNK, если кто-то считает, что идея является жизнеспособной альтернативой;

http://plnkr.co/edit/4dskLo0w1XZkPckyE61z?p=info

(Это работает, когда вы вводите («FR», «NL», «BE» и т.д. вручную)

Answer 1

Я нашел решение что-то вроде этого вы добавить это в вашей функции мыши в mapael. вы определяете previousSelectedElementId в нуль вне всей функции mapael. она не делает именно то, что вы хотите, но это довольно близко.

if (previousSelectedElementId !== null) { 
    newData.areas[previousSelectedElementId] = { 
     attrs: { 
      fill: "rgba(255,255,255,0.3)" 
     } 
    }; 
} 

if (mapElem.originalAttrs.fill == "rgba(255,255,255,0.3)") { 
    newData.areas[id] = { 
     attrs: { 
      fill: "rgba(0,0,0,1)" 
     } 
    }; 
    previousSelectedElementId = id; 
} else { 
    newData.areas[id] = { 
     attrs: { 
      fill: "rgba(255,255,255,0.3)" 
     } 
    }; 
    previousSelectedElementId = null; 
} 

$(".world").trigger('update', [{mapOptions: newData}]);