Question

我有this world map。我知道如何将每个国家/地区悬停在每个国家/地区上，但我希望当一个大陆上的所有国家/地区在我悬停在该大陆上的任何一个国家时都突出显示。

Answer 1

该世界地图的组织方式不尽人意。有digraph country codes被添加为类（PE：秘鲁）。您必须浏览所有有向图的某些资源，或者看看是否找到已经按大洲对其进行索引的内容。创建映射非常必要，这样您才能知道哪些类对应于哪个洲。

然后，您可以设置规则，以便突出显示某个国家/地区，那么您就知道其他国家/地区组成的国家属于同一大陆，并且可以突出显示这些国家。

const countryToContinent = {
    'CA': 'North America',
    'US': 'North America',
    // ...
};
const continentToCountries = {
    'North America': ['US', 'CA', 'MX', // ...],
    // ...
};
const landElements = document.getElementsByClassName('land');
landElements.forEach(land => {
    land.addEventListener('hover', event => {
        let continent;
        land.classList.forEach(className => {
            if(className !== 'land'){
                if(countryToContinent.hasOwnProperty(className)){
                    continent = countryToContinent[]
                }

            }
        });
        // this is just to be careful, there are a lot of svgs in there
        if(continent){
            // remove previously highlighted countries/continents
            const alreadyHighlightedCountries = document.getElementsByClassName('highlight-block');
            alreadyHighlightedCountries.forEach(highlightedCountry => {
                highlightedCountry.remove('highlight-block');
            });
            const countriesToHighlight = continentToCountries[continent];
            countriesToHighlight.forEach(country => {
                const countrySvg = document.getElementsByClassName(country);
                if(!countrySvg.classList.has('highlight-block')){
                    countrySvg.add('highlight-block');
                }
            });
        }

    });
});

分别在您的CSS中添加

.highlight-block {
    fill: red !important;
}

svg悬停突出显示一个大陆上的所有国家

1 个答案: