javascript - 需要帮助为 jQuery Map 上的状态标签创建事件状态 On Click

Question

我正在使用 New Signature 美国 map 插件制作交互式 map 。您可以在这里看到我的代码:http://codepen.io/ann_kwilinski/pen/EKdGYW

我还将用“我是 javascript 初学者”作为序言。

我需要向我的状态标签添加一个事件状态，但我真的不知道如何编写它。该插件有悬停状态选项，但没有事件状态。

'labelTextHoverStyles': {
            fill: '#000000'
        },

如果有人能指导我如何做到这一点，我将不胜感激。

更新

我需要帮助将 stateSpecificLabelStyles 绑定(bind)到我已有的点击事件:

'click' : function(event, data) {
 $('#clicked-state')
 .text('Breathe Better Network partners in '+ data.name)
 .stop()
 .animate({backgroundColor: '#ddd'}, 1000);

// Populate List in Panel
                //var stateSelected = data.name;
                var stateContent = $('#'+data.name+'-li').html();
                // alert(stateContent);
                $("#state-list-response").html(stateContent);

                //Open Panel List
                $(".state-list-overlay").slideDown( "fast", function() {
                    $(".state-list-panel").slideDown( "fast", function() {
                        $(".state-list").fadeIn();
                  });
              });

                $("#map > svg > path").each(function(i){
                    $(this).css('fill', '');
                });
                $('#' + data.name).css('fill', '#26aedf');
                },


    });

Answer 1

我认为您需要使用 JQuery U.S Map 的 stateSpecificStyles 属性:

$('#map').usmap({
  stateSpecificStyles: {
    'MD': {fill: 'yellow'},
    'VA': {fill: 'teal'}
  } 
});

As 'MD' and 'VA' are your state codes in the MAP.

更新:是的，您还可以绑定(bind)自己的 Click 事件，例如:

    click: function(event, data) {

      // Output the abbreviation of the state name to the browser's console. Press f12 in your browser to see this result.
      console.log(data.name);

      // And when you have the state abbreviation, you can use the above example like this:
      stateSpecificStyles: {
        data.name: {fill: 'black'}
      }

    }