使用 jQuery 在 SVG 地图上仅选择一个区域答案

【问题标题】：Select only one area on SVG map using jQuery使用 jQuery 在 SVG 地图上仅选择一个区域
【发布时间】：2016-08-01 16:21:45
【问题描述】：

我正在使用 Mapael，一个 Raphael 扩展来提供交互式地图，到目前为止，我已经对其进行了编码，因此您可以选择多个区域并根据单击的区域使 div 元素可见，现在我想成为能够限制用户一次只能选择一个区域。

http://plnkr.co/edit/2UAl4Yax99dJAPIDWuTy?p=preview

这是覆盖点击功能的代码部分。

eventHandlers: {
    click: function(e, id, mapElem) {
        var newData = {
            'areas': {}
        };
        if (mapElem.originalAttrs.fill == "#f4f4e8" && "id[^='department']") {
            newData.areas[id] = {
                attrs: {
                    fill: "#0088db"
                }
            };
            $('#' + id).css("visibility", "visible")
        }
        else if (mapElem.originalAttrs.fill == "#0088db" && "id[^='department']") {
            newData.areas[id] = {
                attrs: {
                    fill: "#f4f4e8"
                }
            };
            $("#" + id).css("visibility", "hidden")
        }
        $(".mapcontainer").trigger('update', [newData]);
    }
},

同样，这里显示的地图允许您单击多个区域，但是我想这样做，以便您一次只能选择一个区域。

我已经尝试了很长一段时间自己想出一个解决方案，但是我认为我的编码人员有些障碍，可以通过一些建议来为我指明正确的方向。我一直在尝试使用 .bind、.target 以及 mapael afterUpdate 功能（如果有帮助，如下所示）。

var options = {
  mapOptions: {},             // was updatedOptions
  replaceOptions: false       // replace opt.resetPlots/resetAreas: whether mapsOptions should entirely replace current map options, or just extend it,
  newPlots: {},               // was newPlots
  newLinks: {},               // was opt.newLinks
  deletePlotKeys: [],         // was deletedPlots
  deleteLinkKeys: [],         // was opt.deletedLinks
  setLegendElemsState: true,  // is new
  animDuration: 0,            // was opt.animDuration
  afterUpdate: function(){}   // was opt.afterUpdate
};
$(".container").trigger('update', [options]);

我不确定解决方案是否可能类似于在第一次单击时循环遍历 SVG 路径以确保未单击任何元素/具有蓝色填充，然后从那里开始？虽然这对我来说听起来有点过于复杂，而且我不确定它在实践中会如何实现。

【问题讨论】：

记住上次点击的内容并在下次点击时重置其颜色。
我会在 else if 语句中这样做吗？

标签： javascript jquery svg raphael

【解决方案1】：

我已经找到了解决这个问题的方法，这是一个plnkr；

eventHandlers: {
                    click: function (e, id, mapElem, textElem) {
                        var newData = {
                            'areas': {}
                        };

                        if (previousSelectedElementId !== null) {
                            newData.areas[previousSelectedElementId] = {
                                attrs: {
                                    fill: "#5ba4ff"
                                }
                            };
                        }

                        if (mapElem.originalAttrs.fill == "#5ba4ff") {
                            newData.areas[id] = {
                                attrs: {
                                    fill: "#0088db"
                                }
                            };
                            previousSelectedElementId = id;
                        } else {
                            newData.areas[id] = {
                                attrs: {
                                    fill: "#5ba4ff"
                                }
                            };
                            previousSelectedElementId = null;
                        }
                        $(".mapcontainer").trigger('update', [newData]);
                    }

http://jsfiddle.net/neveldo/wfftgu20/

【讨论】：