jQuery Maphilight. Toggle alwaysOn before highlighting new one

Question

Toggling off selected areas when hovering on new areas or selecting a new area.

I am using jQuery Maphilight to hilight selected areas on a map. I have successfully added a click state, so the area of the map remains hilighted when a user clicks it. But when they click a second and third area, the 1st area remains highlited which I don't want.

How can I toggle this alwaysOn attribute for all elements to turn off. I can't seem to figure it out.

Thanks.

.bind('click.maphilight', function(e) {     
    e.preventDefault();
    var data = $(this).mouseout().data('maphilight') || {};
    data.alwaysOn = !data.alwaysOn;
    $(this).data('maphilight', data).trigger('alwaysOn.maphilight');
})

score 3 · Answer 1 · answered Jan 22 '15 at 18:12

For future reference this works best.

// Turn off all
$("area").data('maphilight', { alwaysOn: false }).trigger('alwaysOn.maphilight');

// Turn on one
$("area[data-id=" + id + "]").data('maphilight', {alwaysOn: true}).trigger('alwaysOn.maphilight');

score 0 · Accepted Answer · answered Mar 13 '14 at 14:55

Found a solution that may work for me:

.bind('click.maphilight', function(e) {     
                    $(this).data('maphilight', { 
                          alwaysOn: true 
                    }).trigger('alwaysOn.maphilight');
                    //check if area wasnt already selected - otherwise gets buggy
                    if( !$(this).hasClass('selected') ){ 
                      $('.selected').data('maphilight', {
                          alwaysOn: false
                      }).trigger('alwaysOn.maphilight');
                      $('#map-tag area').removeClass('selected');
                      $(this).addClass('selected');
                    }
                })

jQuery Maphilight. Toggle alwaysOn before highlighting new one

2 Answers2