向 jQuery Map Highlight 插件添加上一个/下一个功能

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 的顺序来控制区域的顺序...