アクティブな状態を作るのに助けが必要ですjQueryで状態ラベルをクリックするには

Question

私はNew Signature USマッププラグインを使ってインタラクティブマップを作成しています。あなたはここに私のコードを見ることができます：http://codepen.io/ann_kwilinski/pen/EKdGYW

私はまた、私は初心者ですjavascriptです。

私は自分の状態ラベルにアクティブな状態を追加する必要があります。私は本当にそれを書く方法に固執しています。プラグインにはホバー状態オプションがありますが、アクティブ状態はありません。

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

もし誰かがそれを行う方法の方向で私を指摘することができますそれは非常に高く評価される。

更新は

私は私が既に持っているクリックイベントにstateSpecificLabelStylesを結合助けが必要：私はあなたがJQuery U.S MapのstateSpecificStylesプロパティを使用する必要があると思う

'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

：

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

「MD」と「VA」はあなたの元気ですMAPのコードを食べました。更新

：そして、はい、あなたはまた、独自の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'} 
     } 

    }