patternjavascriptMinor
Showing information about states on a map when clicked
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
So, you could just say
and
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.
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.