Question

So I have a web app which uses all the hot keys from A to Z.

Each hot key is used for a tab. So for example:

I have 20 tabs:

#tab1, #tab2, #tab3, #tab4 etc. All tabs get a class of .tabs.

So for the hotkeys to work I made this:

if (e.keyCode == 65) {$('.tabs:not(#tab1)').hide();$("#tab1").fadeIn();}
if (e.keyCode == 66) {$('.tabs:not(#tab2)').hide();$("#tab2").fadeIn();}
if (e.keyCode == 67) {$('.tabs:not(#tab3)').hide();$("#tab3").fadeIn();}
if (e.keyCode == 68) {$('.tabs:not(#tab4)').hide();$("#tab4").fadeIn();}
if (e.keyCode == 69) {$('.tabs:not(#tab5)').hide();$("#tab5").fadeIn();}
if (e.keyCode == 70) {$('.tabs:not(#tab6)').hide();$("#tab6").fadeIn();}
if (e.keyCode == 71) {$('.tabs:not(#tab7)').hide();$("#tab7").fadeIn();}
//etc till keycode 81 and tab20.

So, is there a better optimizing way to make this so it will be written in less characters? Since on each line I’m using twice the the same ID.

Edit/Note: Sorry, the actual tab ID’s are random names.

Thanks

Answer 1

Something like this perhaps:

if(e.keyCode >= 65 && e.keyCode <= 81) {
    var tab = e.keyCode - 65 + 1;
    $('.tabs:not(#tab' + tab + ')').hide();
    $('#tab' + tab).fadeIn();
}

I don’t see how keycode 81 is supposed to be tab20 though, wouldn’t that be tab17?

---

Update: If your tab ids can be anything at all then just throw them in an array:

var tab_ids = [ 'where', 'is', 'pancakes', 'house', ... ];
if(e.keyCode >= 65 && e.keyCode <= 81) {
    var tab = tab_ids[e.keyCode - 65];
    $('.tabs:not(#' + tab + ')').hide();
    $('#' + tab).fadeIn();
}

If you also have gaps in they keycodes then use an object instead of an array:

var tab_ids = { 65: 'where', 70: 'is', 72: 'pancakes', 73: 'house', ... };
var tab     = tab_ids[e.keyCode];
if(tab) {
    $('.tabs:not(#' + tab + ')').hide();
    $('#' + tab).fadeIn();
}