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，附加的註釋：

在你的第二個區域

，你宣佈南卡羅來納州兩次，也許這是一個錯字，但無論如何，避免討厭的不良副作用，每個代碼必須只在該地區只有一次。