javascript - 带 JS 的 SVG map - 更改悬停时多个路径的状态

Question

我正在使用 Raphael 库制作可点击的 SVG map ，并引用 this tutorial 中的详细信息。 。我还设置了一个工作 jsfiddle here 。基本上，对于 map 中的每个州，我都为 map 形状本身和州缩写标签定义了路径 - 在 fiddle 的情况下，我显示一个州 PA，用于演示目的。我为“区域”和“标签”定义了单独的数组。目前，我的悬停状态适用于状态形状(将其颜色更改为深蓝色)，但也希望状态缩写标签在悬停在状态上时更改为白色。

我定义了以下数组和循环来处理区域(形状)的悬停和单击事件，我想添加逻辑来查找匹配标签并将其填充属性更改为悬停时的白色(并在悬停时恢复)鼠标移出):

// REGION ARRAY
var regions = {};
regions["pennsylvania"] = {href: "#", path: map.path("path here")};

// LABEL ARRAY
var labels = {};
labels["pennsylvania"] = {href: "#", path: map.path("path here")};

// REGION STYLES
var animationSpeed = 500;
var shapeStyle = {
    fill: "#cdd6e9",
    stroke: "#fff",
    "stroke-width": 0.25,
    "stroke-linejoin": "round",
    cursor: "pointer"
};
var hoverStyle = {
  fill: "#0a3a62"
}

// REGION LOOP
for (var regionName in regions) {
    (function(region) {

        region.path.attr(shapeStyle);
        region.path[0].addEventListener("mouseout", function() {
            region.path.animate(shapeStyle, animationSpeed);
        }, true);

        region.path[0].addEventListener("mouseover", function() {
            region.path.animate(hoverStyle, animationSpeed);
        }, true);

        region.path[0].addEventListener("click", function() {
            location.href = region.href;
        }, true);

    })(regions[regionName]);
}

因此，在循环区域数组时，我将如何调整脚本以在标签数组中找到匹配的标签并更改其填充状态？感谢您在这里提供任何见解。

Answer 1

在设置区域事件时设置标签事件，以便可以匹配regionName。您可以在 for 循环中使用 let 关键字，也可以传递 regionName 或两者(regions[regionName],labels[regionName]) 到立即函数，如 @Ian 建议。

var labelHoverStyle = { // add
    fill: '#FFFFFF'
}

var labelStyle = {
    fill: "#0a3a62",
    stroke: "#0a3a62",
    "stroke-width": 0.25,
    "stroke-linejoin": "round",
    cursor: "pointer" 
}

使用Let

for(let regionName in regions) { // notice the variable declaration
    (function (region) {

        if (regionName == "district-of-columbia") {
            region.path.attr(shapeStyle2);
            region.path[0].addEventListener("mouseout", function() {
            region.path.animate(shapeStyle2, animationSpeed);
            labels[regionName].path.animate(labelStyle, animationSpeed);
            }, true);
        } else {
            region.path.attr(shapeStyle);
            region.path[0].addEventListener("mouseout", function() {
            region.path.animate(shapeStyle, animationSpeed);
            labels[regionName].path.animate(labelStyle, animationSpeed);
            }, true);
        }

        region.path[0].addEventListener("mouseover", function() {
            region.path.animate(hoverStyle, animationSpeed);
            labels[regionName].path.animate(labelHoverStyle, animationSpeed);
        }, true);

        region.path[0].addEventListener("click", function() {
            location.href = region.href;         
        }, true);

    })(regions[regionName]);
}

传递regionName或(regions[regionName],labels[regionName])

for(var regionName in regions) {
    (function (region, label) { // notice the parameters

        if (region.href.indexOf('district-of-columbia') > -1) {
            region.path.attr(shapeStyle2);
            region.path[0].addEventListener("mouseout", function() {
            region.path.animate(shapeStyle2, animationSpeed);
            label.path.animate(labelStyle, animationSpeed);
            }, true);
        } else { 
            region.path.attr(shapeStyle);
            region.path[0].addEventListener("mouseout", function() {
            region.path.animate(shapeStyle, animationSpeed);
            label.path.animate(labelStyle, animationSpeed);
            }, true);
        } 

        region.path[0].addEventListener("mouseover", function() {
            region.path.animate(hoverStyle, animationSpeed);
            label.path.animate(labelHoverStyle, animationSpeed);
        }, true);

      ....

    })(regions[regionName], labels[regionName]); // notice the arguments
}