使用jQuery

Question

我正在使用Mapael，一个拉斐尔扩展以提供交互式地图，到目前为止我已对其进行编码，因此您可以根据所点击的区域选择多个区域并使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路径以确保没有点击任何元素/有蓝色填充，然后从那里开始？虽然这对我来说听起来有点过于复杂，但我不确定它在实践中会如何实现。

Answer 1

我找到了解决这个问题的方法，这里有一个解决方案;

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/