将 jQuery 事件与 Raphael/Mapael 链接在一起答案

【问题标题】：Chaining jQuery events together with Raphael/Mapael将 jQuery 事件与 Raphael/Mapael 链接在一起
【发布时间】：2016-09-17 11:08:35
【问题描述】：

我正在使用 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进行颜色更改。

我不确定是否可以重复使用 previousSelectedElementId 来复制与 click 事件一起使用的相同功能？

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

干杯

编辑：

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

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

（当您手动输入（'FR'，'NL'，'BE'等）时有效）

【问题讨论】：

我认为这可能只是一个简单的复制/粘贴类型错误。在 map_script.js 的第 14 行，如果你将 updatedOptions.areas[inputVal] 更改为 updatedOptions.areas[previousSelectedElementId]，我认为你会得到想要的行为。

标签： javascript jquery svg raphael mapael

【解决方案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}]);

【讨论】：