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", 
      ar: "#FFFA00", 
      ... all other states 
      wv: "#E20079", 
      wy: "#009EE0" 
  } 
  

• toggleAreaHighlight：为什么在切换亮点功能跳过当前区域的代码？

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

  突出显示和未突出显示鼠标指针下的当前状态（区域）已经内置，和等等，因此，没有必要来处理它的两倍。

BTW，附加的注释：

在你的第二个区域

，你宣布南卡罗来纳州两次，也许这是一个错字，但无论如何，避免讨厌的不良副作用，每个代码必须只在该地区只有一次。