Raphael/Mapaelと一緒にjQueryイベントを連結

Question

ラファエルプラグインのMapaelを使用してインタラクティブマップを作成しています。クリックしたときにマップの1つの領域に色をつけたいのですが、その領域を再度クリックするとデフォルトの色に戻ります。ここにはplnkがあります。

http://plnkr.co/edit/VNUYsO0TeX7AIdLqLjiG

あなたが見ることができるように、あなただけのマップの一部をクリックすることができます。ただし、リスト項目を使用すると問題が発生します。私は両方の機能を連携させていきたいので、いつでも地図上に緑色で表示される領域が1つしかないことがあります。

ここに私が変更する必要があると思うコードがあります。

は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イベントで動作する同じ機能を再現できるかどうかを確認しますか？

うまくいけば、私は問題を十分に説明したことがあります。必要な情報がさらに必要な場合は、必要に応じて提供することができます。

乾杯

---

EDIT：

私はもう少しそれで遊んで、隠しテキストボックスに選択をリンクし、.oneハンドラを使用しての可能性を考えてきましたか？残念ながら、私はそれを動作させることはできませんが、誰かがそのアイデアが実行可能な選択肢だと思うなら、ここではplnkです。

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

（あなたが（「FR」を入力すると、それは動作しますが、「NL」、手作業など「BE」）

Answer 1

私はあなたがであなたのクリック機能にこれを追加し、このような何かに解決策を見つけましたmapael。あなたは、全体mapael関数の外でヌルとしてpreviousSelectedElementIdを定義する。それは正確に何をしたい行いませんが、それは非常に近いです。

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