向jQuery地圖突出顯示插件添加上一個/下一個功能

Question

正如您在我的jsFiddle示例中看到的，我有一個使用jQuery Map Highlight插件的圖表，它允許用戶單擊圖的不同部分並查看相應的文本剩下。

現在，與圖表交互的唯一方法是點擊它。我想讓用戶能夠點擊上一個和下一個按鈕來控制它。我只是不確定如何去做。

任何幫助，將不勝感激： http://jsfiddle.net/keith/jkLH7/1/

Answer 1

我想你可以通過觸發您現有的點擊處理程序做到這一點很簡單：

$('#map-previous').click(function(){ 
    var currentAreaIndex = $('area.current').index(); 
    var prevAreaIndex = currentAreaIndex - 1; 

    // If .eq() gets -1 as a parameter it retrieves the last item 
    // You could disable the link if you didn't like that behavior  
    $('area').eq(prevAreaIndex).click(); 
}); 

$('#map-next').click(function(){ 
    var currentAreaIndex = $('area.current').index(); 
    var nextAreaIndex = currentAreaIndex + 1; 

    var $areas = $('area'); 

    // Here you'll need to manually handle the wrap-around case  
    if (nextAreaIndex > $areas.length){ 
    nextAreaIndex = 0; 
    } 

    $('area').eq(nextAreaIndex).click(); 
}); 

您可以通過改變順序控制區域的順序的HTML ...