Jvectormap - 爲每個區域設置懸停顏色？

Question

我想爲JVectorMap插件設置單個區域和懸停顏色，並且將沒有數據的區域設置爲默認白色。

到目前爲止，我已經剝去了比例數據，並用顏色代碼替換了它（如下面的代碼所示）。這很棒，但我不知道如何添加懸停數據。

如果可能，我還想爲document.body.style.cursor添加數據，以便關閉單個區域（例如，實體被阻止進行交易），以便它似乎不是一個活躍的鏈接。

你還會注意到我有代碼在那裏打開面板。它用於顯示具有個性化內容的完整彈出窗格，用於每個有數據的區域。它是繼承的代碼，所以說實話我不確定它是如何工作的。

如果我忘記了任何東西，請告訴我。

jQuery.noConflict(); 
jQuery(function(){ 
    var $ = jQuery; 
    $('#map_custom').vectorMap({ 
     map: 'world_mill_en', 
     backgroundColor : "#b8b8b8", 
     regionStyle : { 
      initial : { 
       fill : "white", 
       "fill-opacity" : 1, 
       stroke : "none", 
       "stroke-width" : 0, 
       "stroke-opacity" : 1 
      }, 
      hover : { 
       "fill-opacity": 0.7, 
      }, 
      selectedHover : {} 
     }, 
     onRegionOver: function (event, code, region) { 
      document.body.style.cursor = "pointer"; 
     }, 
     onRegionOut: function (element, code, region) { 
      document.body.style.cursor = "default"; 

     }, 
     onRegionClick: function(event, code, region){ 
      if (code == "CA") {window.location = 'CalRamic-distributors-Canada.html'} 
       if (code == "US") {window.location = 'CalRamic-distributors-USA.html'} 
        if (code == "IE") { 
         $(".panel").hide("fast"); 
         $("#ireland").show("slow"); 
         document.getElementById('test_data').innerHTML=code; 
        } 
        if (code == "GB") { 
         $(".panel").hide("fast"); 
         $("#unitedkingdom").show("slow");  
         document.getElementById('test_data').innerHTML=code; 
        } 
        if (code == "ES") { 
         $(".panel").hide("fast"); 
         $("#spain").show("slow");  
         document.getElementById('test_data').innerHTML=code; 
        } 
        if (code == "PT") { 
         $(".panel").hide("fast"); 
         $("#portugal").show("slow");  
         document.getElementById('test_data').innerHTML=code; 
        } 
        if (code == "IL") { 
         $(".panel").hide("fast"); 
         $("#israel").show("slow");  
         document.getElementById('test_data').innerHTML=code; 
        } 
     // I've got a LOT more countries in my code, but you don't need all of them 
     else if (code){ 
      event.preventDefault();  
     } 
    },  
    series: { 
     regions: [{ 
      values: sample_data 
     }] 
    } 
}); 

    /* Close the Panel */ 
     $("body").click(function(e) {  
      if (e.target.id == "close" || $(e.target).parents("#close").size()) 
      {    
       $(".panel").hide("slow"); 
      } 
     }); 

}) 

目前該代碼從sample_data.js文件，該文件的格式如下拉的顏色數據：

var sample_data = { 
     "CA": '#0071a4', 
     "US": '#0071a4', 
     "IE": '#0071a4', 
     "GB": '#0071a4', 
     "ES": '#0071a4', 
    } 

很遠我已經得到了一個新手感謝這裏的社區，但我我被要求用jvectormap比以前更遠。不幸的是，我對這個編程代碼只有很危險，所以我要向專家伸出援助之手。

Answer 1

首先，這只是一個建議，你應該擺脫瘋狂的邏輯，並使其成爲一個泛化的函數。

例如：

function panelHandler(element, hideSpeed, showSpeed){ 
    $('.panel').hide(hideSpeed); 
    $(element).show(showSpeed); 
    $('#test_data').innerHTML('code'); 
} 

if (code == "IE") { 
    panelHandler("#unitedKingdom", "slow", "fast"); 
} 

if (code == "GB") { 
    panelHandler("#spain", "slow", "fast"); 
} 

etc... 

至於你的問題，只是附上你想相應的類設置。然後你檢查它的事件，並像這樣執行它：

$('#selector').css('cursor', 'pointer'); 

希望這會有所幫助。如果您需要更詳細的信息，請告訴我，我可以幫忙。