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

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文件中路径标识符相同的地图属性，然后使用updatedOptions来执行颜色更改。

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

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

干杯

编辑：

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

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

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

Chaining jQuery events together with Raphael/Mapael

javascript

jquery

svg

raphael

mapael