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

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

1 个答案: