javascript - 将jQuery事件与Raphael/Mapael链接在一起

我正在使用Mapael（Raphael插件）来创建交互式地图。我希望在单击时为地图的一个区域着色，然后在再次单击该区域时将其还原为默认颜色。这是a

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处理程序的可能性吗？不幸的是，我无法使它起作用，但是如果有人认为该想法是可行的选择，这是一个好办法。

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

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

最佳答案

我找到了解决此类问题的方法。将其添加到Mapael的click函数中。您可以在整个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}]);