jquery - Jvectormap - 设置每个区域的悬停颜色？

Question

我想为 JVectorMap 插件设置单个区域和悬停颜色，并将没有数据的区域保留为默认白色。

到目前为止，我已经删除了比例数据并用颜色代码替换它(如下面的代码所示)。这太棒了，但我不知道如何添加悬停数据。

如果可能的话，我还想添加 document.body.style.cursor 的数据，以便我可以关闭各个区域(例如，该实体被阻止进行交易)，以便它似乎不是一个事件链接。

您还会注意到我有代码可以打开其中的面板。它用于显示完整的弹出 div，其中包含我有数据的每个区域的个性化内容。它是继承的代码，所以说实话我不确定它是如何工作的。

如果我忘记了什么，请告诉我。

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

首先，这只是一个建议，你应该摆脱疯狂的 if 逻辑，并使其成为一个通用的函数。

例如:

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...

对于你的问题，只需附上你想要的相应类(class)设置即可。然后，您在事件上检查它，并像这样执行它:

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

希望这有帮助。如果您需要更详细的信息，请告诉我，我可以提供帮助。