Geek asks and answers

Always on jquery command

Recently, I am working on a project to make an interactive directory map for a shopping center without using flash memory, because they need to access it from mobile devices.

but I have a problem with jquery, I use custom java commands with jquery map highlighting. which I use to target my maps.

The method is called when someone clicks either on the map or in the list below, it displays the map, and it displays information on the right side.

My problem is that when someone clicks on another store from the list or from the map, he will not clear the previous selected block, and the previous one will save the selection, no matter how many times you click.

I need to clarify my code so that someone clicks the second link, it will automatically clear the previous one.

can anyone see my demo file under the link below http://www.pad10.com/testsities/directorymap/

I will be grateful if anyone help me with this

0
source share
2 answers

The problem is that you do not turn off the selection for the currently selected area when you click on another.

Put this:

$('.selected').data('maphilight', {alwaysOn: false}).trigger('alwaysOn.maphilight');

in salhia.js, in the click handler .mapclick:

$('.mapclick').click(function(){
    $('.selected').data('maphilight', {alwaysOn: false}).trigger('alwaysOn.maphilight');

    $('.mapclick').removeClass('selected');
    $(this).addClass('selected');

    var shop = '.shopdetails#' + $(this).attr('shop');
    var htmlCode = $(shop).html();

    $('.shopinfo').fadeOut(500, function(){
        $('.shopinfo .shopdetails').html(htmlCode);
        $('.shopinfo').fadeIn(500);
    });
});
0
source

Slightly changed the code shown in the previous answer, so it is more general:

// Init
$('.map').maphilight({
       stroke: false,               
}); 

// Reset all map

$('.selected').data('maphilight', {alwaysOn:false}).trigger('alwaysOn.maphilight'); 

$('area').click(function(){    
    // Reset all areas with class 'selected'
    $('.selected').data('maphilight', {alwaysOn: false}).trigger('alwaysOn.maphilight');
    // Remove class selected
    $('area').removeClass('selected');
    // select and highlight this area
    $(this).addClass('selected');
    $(this).data('maphilight', {alwaysOn: true}).trigger('alwaysOn.maphilight');
});
0
source

More articles:


All Articles