帶有鼠標懸停功能的SVG圖像地圖 - 點擊數據「粘貼」？

Question

我使用this plugin創建了一個圖像映射。

當您將鼠標懸停在某個狀態時，它會顯示您懸停的狀態的名稱。但是，如果你點擊一個狀態，我想讓它的數據保持靜態，直到你重新點擊要釋放的狀態。我無法弄清楚如何做到這一點。

這裏是什麼，我至今一codepen： http://codepen.io/anon/pen/rOZeBB

我試圖unbind上點擊，其工作的鼠標懸停，但我無法弄清楚如何重新綁定，當你重新 - 點擊狀態：

$('#map').usmap({ 
    mouseover: function(event, data) { 
     $('#selected-state > span').text(data.name); 
    }, 
    click: function(event, data) { 
     $('#selected-state > span').text(data.name); 
     $('#map path').unbind('mouseover'); 
    } 
    }); 

有沒有辦法同時使用鼠標懸停和點擊功能？

Answer 1

儘量只設置一個全局變量：

var selectedMap = null; 
$('#map').usmap({ 
    mouseover: function(event, data) { 
     if (selectedMap == null) { 
      $('#selected-state > span').text(data.name); 
     } 
    }, 
    click: function(event, data) { 
     $('#selected-state > span').text(data.name); 
     selectedMap = data.name; 
    } 
    }); 

要「扯去」它它再次點擊後，使用this。