Добавление предыдущей / следующей функциональности в плагин Highlight jQuery Map

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 ...