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

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