jquery - jQuery Maphilight。在突出显示新之前切换alwaysOn

Question

悬停在新区域或选择新区域时切换选定区域。

我正在使用 jQuery Maphilight 来突出显示地图上的选定区域。我已经成功添加了一个点击状态，所以当用户点击它时，地图的区域仍然是高亮的。但是当他们点击第二个和第三个区域时，第一个区域仍然突出显示，这是我不想要的。

如何切换此 alwaysOn 属性以关闭所有元素。我似乎无法弄清楚。

谢谢。

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

Answer 1

以供将来参考，这效果最好。

// 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');

Answer 2

找到了可能对我有用的解决方案：

.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');
                    }
                })