优化 jQuery 热键

Question

所以我有一个网络应用程序，它使用从 A 到 Z 的所有热键。

每个热键都用于一个选项卡。比如：

我有 20 个标签：

#tab1, #tab2, #tab3, #tab4 等。所有选项卡都有一个 .tabs 类。

所以为了让热键起作用，我做了这个：

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.

那么，有没有一种更好的优化方式来实现它，这样它就可以用更少的字符编写？因为在每一行我使用了两次相同的 ID .

编辑/注意：抱歉，实际的标签 ID 是随机名称。

谢谢

Answer 1

可能是这样的：

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

我不明白 keycode 81 应该如何成为 tab20，那不是 tab17 吗？

---

更新：如果您的标签ids 可以是任何东西，那么只需将它们放入数组中：

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();
}

如果您的键码中也有空白，请使用对象而不是数组：

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();
}

Answer 2

$('.tabs:not(#tab' + (e.keyCode - 64) + ')').hide();
$("#tab" + (e.keyCode - 64)).fadeIn();

Answer 3

只需用这段代码替换所有这些 if 语句

$('.tabs:not(#tab'+(e.keyCode-64)+')').hide();
$("#tab"+(e.keyCode-64)).fadeIn();