优化jQuery热键

Optimizing jQuery Hotkeys

本文关键字：热键 jQuery 优化      更新时间：2023-09-26

我有一个web应用程序，它使用了从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是随机名称。

谢谢

可能是这样的:

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吗?

更新:如果你的标签id s可以是任何东西，那么就把它们扔到数组中:

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

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

用下面的代码替换所有的if语句

$('.tabs:not(#tab'+(e.keyCode-64)+')').hide();
$("#tab"+(e.keyCode-64)).fadeIn();
相关文章：