javascript - 在拉斐尔 map 上触发鼠标悬停事件

Question

我是第一次使用 Raphael 插件，到目前为止，我成功地创建了一张德国 map 并勾勒出内部所有不同区域的轮廓。我发现了如何绑定(bind)鼠标悬停效果，所以当我将鼠标悬停在某个区域上时，它的颜色会发生变化。一切看起来都很好，直到我想从 map 外部触发相同的鼠标悬停效果。有一个指向所有区域的链接列表，每个链接应该在悬停时在 map 上为其各自的地理位置(路径)着色。问题是我不知道如何从外部触发鼠标悬停效果。

这是我用于代码的引用指南:Clickable France regions map

这是我的 map 初始化:

var regions = [];

var style = {
    fill: "#f2f2f2",
    stroke: "#aaaaaa",
    "stroke-width": 1,
    "stroke-linejoin": "round",
    cursor: "pointer",
    class: "svgclass"
};

var animationSpeed = 500;

var hoverStyle = {
    fill: "#dddddd"
}

var map = Raphael("svggroup", "100%", "auto");
map.setViewBox(0, 0, 585.5141, 792.66785, true);

// declaration of all regions (states)
....
var bayern = map.path("M266.49486,..,483.2201999999994Z");
bayern.attr(style).data({ 'href': '/bayern', 'id': 'bayern', 'name': 'Bayern' }).node.setAttribute('data-id', 'bayern');
regions.push(bayern);

这是我的“正常”鼠标效果发生的地方:

for (var regionName in regions) {
    (function (region) {
        region[0].addEventListener("mouseover", function () {
            if (region.data('href')) {
                region.animate(hoverStyle, animationSpeed);
            }
        }, true);

        region[0].addEventListener("mouseout", function () {
            if (region.data('href')) {
                region.animate(style, animationSpeed);
            }
        }, true);

        region[0].addEventListener("click", function () {
            var url = region.data('href');

            if (url){
                location.href = url;
            }
        }, true);
    })(regions[regionName]);
}

我有一个带有链接的菜单，我想将每个链接绑定(bind)到各自的区域，这样我也可以应用动画。

$("ul.menu__navigation li a").on("mouseenter", function (e) {
    // this function displays my pop-ups
    showLandName($(this).data("id"));
    // $(this).data("id") returns the correct ID of the region
});

如果有任何想法，我将不胜感激!提前致谢!

Answer 1

我想出了一个办法。它肯定不是最佳的，尤其是在性能方面，但至少它给了我想要的输出。我仍然重视更好的答案，但截至目前，鼠标悬停事件中的一个新循环完成了这项工作。

$("ul.menu__navigation li a").on("mouseenter", function (e) {
    // this function displays my pop-ups
    showLandName($(this).data("id"));

    // animate only the one hovered on the link list
    var test = '/' + $(this).data("id");

    for (var regionName in regions) {
        (function (region) {
            if (region.data('href') === test) {
                region.animate(hoverStyle, animationSpeed);
            }        
        })(regions[regionName]);
    }
});