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

Question

我正在使用 Mapael，这是一个用于创建交互式 map 的 Raphael 插件。我希望在单击时为 map 的一个区域着色，然后在再次单击该区域时将其恢复为默认颜色。这是一个 plnk;

http://plnkr.co/edit/VNUYsO0TeX7AIdLqLjiG

如您所见，您只能单击 map 的一部分。然而，问题是当您使用列表项时。我想让这两个功能一起工作，这样 map 上在任何时候都只能有一个区域显示为绿色。

这是我认为需要更改的代码；

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 来复制与点击事件一起使用的相同功能？

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

干杯

---

编辑:

我一直在研究它，并考虑将选择链接到隐藏的文本框并使用 .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}]);