Javascript JS JQVMap悬停颜色区域

我是JS新手，不知道如何让它工作。如果鼠标悬停其中一个区域，我将尝试为多个区域着色。我用一个开关盒把所有的区域放在一起。到目前为止，这似乎是可行的，因为我正在走出我的测试线。我肯定我只是错过了一件小事。谢谢你的帮助

jQuery(document).ready(function () {
    var red = '#E20079', blue = '#009EE0', yel = '#FFFA00';
    jQuery('#vmap').vectorMap({
        map: 'usa_en',
        backgroundColor: '#383838',
        enableZoom: false,
        showTooltip: true,
        selectedColor: null,
        onRegionOver: function(event, code, region){             
            switch(code) {
                case 'wa': case 'or': case 'ca': case 'nv': case 'id':
                case 'mt': case 'wy': case 'ut': case 'az': case 'nm':
                case 'co': case 'ne': case 'ks': case 'sd': case 'nd':
                case 'mn': case 'wi': case 'ia': case 'il': case 'ak':
                case 'hi':
                    //this output is working fine
                    document.getElementById("demo").innerHTML = code;
                    //but it won't change the color!!
                    hoverColor: 'blue';
                    break;
                case 'mo': case 'ok': case 'tx': case 'ar': case 'la':
                case 'ms': case 'al': case 'ga': case 'fl': case 'tn':
                case 'ky': case 'sc': case 'in': case 'sc':
                    hoverColor: 'yel';
                    break;
                case 'mi': case 'oh': case 'nc': case 'va': case 'wv': 
                case 'pa': case 'de': case 'nj': case 'ny': case 'ct':
                case 'ri': case 'ma': case 'vt': case 'nh': case 'me':
                case 'md': case 'dc':
                    hoverColor: 'red';
                    break;
            }
        },
        onRegionClick: function(code){
            switch(code) {
                case 'wa': case 'or': case 'ca': case 'nv': case 'id':
                case 'mt': case 'wy': case 'ut': case 'az': case 'nm':
                case 'co': case 'ne': case 'ks': case 'sd': case 'nd':
                case 'mn': case 'wi': case 'ia': case 'il': case 'ak':
                case 'hi':
                    window.open("http://www.google.com");
                    break;
                case 'mo': case 'ok': case 'tx': case 'ar': case 'la':
                case 'ms': case 'al': case 'ga': case 'fl': case 'tn':
                case 'ky': case 'sc': case 'in': case 'sc':
                    window.open("http://www.yahoo.com");
                    break;
                case 'mi': case 'oh': case 'nc': case 'va': case 'wv': 
                case 'pa': case 'de': case 'nj': case 'ny': case 'ct':
                case 'ri': case 'ma': case 'vt': case 'nh': case 'me':
                case 'md': case 'dc':
                    window.open("http://www.example.com");
                    break;                  
            }
        }
    });
});

---

我对你的代码进行了一些重构，在某种程度上减少了冗余

我的建议如下：

jQuery(document).ready(function () {
  // Group the codes of each state in the desired macro-areas
  var areas = [['wa','or','ca','nv','id','mt','wy','ut','az','nm','co','ne','ks','sd','nd','mn','wi','ia','il','ak','hi'],
               ['mo','ok','tx','ar','la','ms','al','ga','fl','tn','ky','sc','in'],
               ['mi','oh','nc','va','wv','pa','de','nj','ny','ct','ri','ma','vt','nh','me','md','dc']],
      // Assign links to areas
      links = {0: "http://www.google.com", 1: "http://www.yahoo.com", 2: "http://www.example.com"},
      // Define colors
      red = '#E20079', blue = '#009EE0', yel = '#FFFA00',
      // Assign colors to areas
      colors = {0: blue, 1: yel, 2: red},
      // Prepare container for hover colors
      hoverColors = {};
  (function () {
    // Build a ready-to-use hoverColors list
    areas.forEach(function(members, area) {
      members.forEach(function(state) {
        hoverColors[state] = colors[area];
      });
    });
  })();
  // Used in mouse enter and mouse leave handlers
  function toggleAreaHiglight(code, action){
    var vMap = $('#vmap');
    areas.forEach(function(members) {
      if(members.indexOf(code)>-1) {
        members.forEach(function(state) {
          if(state != code) vMap.vectorMap(action, state);
        });
      }
    });
  }
  // Initialize the map
  $('#vmap').vectorMap({
    map: 'usa_en',
    backgroundColor: '#383838',
    enableZoom: false,
    showTooltip: true,
    selectedColor: null,
    hoverColors: hoverColors,
    onRegionOver: function(event, code, region){
      toggleAreaHiglight(code, 'highlight');
    },
    onRegionOut: function(event, code, region){
      toggleAreaHiglight(code, 'unhighlight');
    },
    onRegionClick: function(event, code, region){
      var link = links[$(areas).map(function(i) {
        if(this.indexOf(code)>-1) return i;
      })[0]];
      if(link) window.open(link);
    }
  });
});

有两部分需要解释：

• hoverColors：我只是提前准备了一个对象，它将 包含州代码和所需代码之间的关联 悬停颜色。结果如下所示：

  {
    ak: "#009EE0",
    al: "#FFFA00",
    ar: "#FFFA00",
    ... all other states
    wv: "#E20079",
    wy: "#009EE0"
  }
  

• toggleAreaHighlight：为什么在toggle highlight功能中跳过当前区域代码

  if(state != code) $('#vmap').vectorMap(action, state);
  

  高亮显示和取消高亮显示鼠标指针下的当前状态（区域）已经内置，因此，无需处理两次

顺便说一句，另请注意：

---

在你的第二个区域中，你两次申报南卡罗来纳州，也许这是一个打字错误，但无论如何，为了避免讨厌的副作用，每个代码必须在该区域中仅出现一次。

你能指定你在头部使用的js库吗？嗨，deblocker，谢谢你的重播和你的工作。我已经用我的代码替换了你的代码，并试着把它转换出来。但目前地图甚至不会出现。也许是因为我使用的图书馆？我正在使用的库：jquery-1.8.2.js、jquery-jvectormap.js、jquery-mousewheel.js、jvectormap.jsHey deblocker，我刚刚注意到我在我的postet示例中使用了其他scipts。在过去的几天里，我经历了很多尝试和错误，sry。在我的示例中，我使用jquery-1.11.3.min.js，jquery.vmap.js。仅此而已。你的工作真的很好，就像预期的那样。谢谢你的反馈，这很好。是的，人们经常会混淆jVestorMap和JVMAO。最后，我正确地理解了您的示例使用JQVMap。如果您可以调整问题下方的标签以反映该库，那就太好了。祝您有个美好的一天。