JS JQVMap悬停色域

Question

我对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;                  
            }
        }
    });
});

Answer 1

在某种程度上，我重构了一些您的代码，以减少冗余。

我的建议如下：

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 00”，ar：“#FFFA00 00”，.所有其他状态wv：“#E 20079”，wy："#009EE0“}
• toggleAreaHighlight：为什么在切换高亮显示函数中跳过当前区域代码？ 如果(state != code) $('#vmap').vectorMap(action，state)； 高亮和取消高亮鼠标指针下的当前状态(区域)已经内置，因此，没有必要处理它两次。

顺便说一句，还有一点：

在您的第二个区域中，您声明了两次南卡罗来纳州，也许这是一个错误，但是无论如何，为了避免讨厌的副作用，每个代码必须只在这些区域中一次。