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

Question

Я использую Mapael, плагин Raphael для создания интерактивной карты. Я пытаюсь покрасить одну область карты при щелчке, а затем при повторном нажатии этой области вернуть ее к цвету по умолчанию. Вот 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, а затем использует updatedOptions для изменения цвета.

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

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

ура

---

РЕДАКТИРОВАТЬ:

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

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