与Raphael/Mapael一起主持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文件中的路径标识符相同的map属性，然后使用updatedOptions执行颜色更改。

我不确定我是否可以重用以前的SelectedElementId来复制与点击事件相同的功能？

希望我已经很好地解释了这个问题，如果需要更多的信息，我可以根据需要提供。

干杯

---

编辑：

我一直在尝试它，并考虑了将所选内容链接到隐藏文本框并使用.one处理程序的可能性？不幸的是，我无法让它发挥作用，但如果有人认为这个想法是一个可行的替代方案，这里有一个提示；

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

(当您手动输入("FR"、"NL"、"BE"等)时，它会起作用

Answer 1

我找到了这样的解决方案。您可以将其添加到Mapael中的单击函数中。在整个mapael函数之外，您将previousSelectedElementId定义为null。它并不能完全达到你想要的效果，但它非常接近。

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