HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptMinor

Showing information about states on a map when clicked

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
mapshowingstatesaboutwhenclickedinformation

Problem

I'm using JQVMap, and I have my code to where depending on what state you click, it'll reveal info about that state within a single div below the map. However, I feel there's a simplified, more efficient way to set up this code so there's not a lot of repeat, especially once I start adding more states. Is there?

switch(code){
    case"tx":
        $('#info-children').children(':not(#info-tx)').hide("slow");
        $('#info-children').children('#info-tx').show("slow");
        break;
    case"il":
        $('#info-children').children(':not(#info-il)').hide("slow");
        $('#info-children').children('#info-il').show("slow");
        break;
    case"fl":
        $('#info-children').children(':not(#info-fl)').hide("slow");
        $('#info-children').children('#info-fl').show("slow");
        break;
    case"ga":
        $('#info-children').children(':not(#info-ga)').hide("slow");
        $('#info-children').children('#info-ga').show("slow");
        break;
    case"pa":
        $('#info-children').children(':not(#info-pa)').hide("slow");
        $('#info-children').children('#info-pa').show("slow");
        break;
    default:
        $('#state-name').html(region);
        $('#info-children').children(':not(#info-uhoh)').hide("slow");
        $('#info-children').children('#info-uhoh').show("slow");
}

Solution

You could have a single if statement covering all your non-default cases, since all your $('info#children')... sequences are the same, except for the state clicked.

So, you could just say

$('#info-children').children(':not(#info-' + code + ')').hide('slow');


and

$('#info-children').children('#info-' + code + ')').show('slow');


So, you could just have one huge logical statement, checking if the code/state is tx, il, fl, ga, or pa. If that statement is true, run the above code; if not, run the default code.

Code Snippets

$('#info-children').children(':not(#info-' + code + ')').hide('slow');
$('#info-children').children('#info-' + code + ')').show('slow');

Context

StackExchange Code Review Q#80494, answer score: 2

Revisions (0)

No revisions yet.