Оптимизация горячих клавиш jQuery

#javascript #jquery #optimization #hotkeys

#javascript #jquery #оптимизация #горячие клавиши

Вопрос:

Итак, у меня есть веб-приложение, которое использует все горячие клавиши от А до Я.

Каждая горячая клавиша используется для вкладки. Так, например:

У меня есть 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.

Итак, есть ли лучший оптимизирующий способ сделать это так, чтобы оно было написано меньшим количеством символов?Поскольку в каждой строке я использую дважды один и тот же идентификатор.

Редактировать / Примечание: Извините, фактические идентификаторы вкладок являются случайными именами.

Спасибо

Ответ №1:

Возможно, что-то вроде этого:

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

Я не понимаю, как keycode 81 должен быть tab20, хотя, разве это не tab17?

Обновление: если ваши вкладки id могут быть любыми, просто поместите их в массив:

 var tab_ids = [ 'where', 'is', 'pancakes', 'house', ... ];
if(e.keyCode >= 65 amp;amp; 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();
}

1. Это ограничивает вкладки буквальными tab1, tab2 и т. Д.? Извините, я не объявил, что вкладки не являются tab1, tab2 и т. Д., Это просто случайные имена. Я назвал их так для демонстрации.

2. При редактировании: Ну, мы не определились с точной горячей клавишей вкладок. Осталось еще 3 вкладки, на которых мы думаем, какие буквы использовать.

3. @jQuerybeast: значит, на ваших вкладках вообще могут быть какие-либо старые id s? Как структурирован HTML?

4. Спасибо за ответ. Вот фактическая рабочая демонстрация: jsfiddle.net/3FHBy Попробуйте буквы a, b, c. Для 20 вкладок это слишком много кода, вам не кажется? Я просто надеялся, что есть способ его оптимизировать. Спасибо

5. @jQuerybeast: Я добавил еще несколько опций, которые могут подойти для вашей ситуации.

Ответ №2:

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

1.Это ограничивает вкладки буквальными tab1, tab2 и т. Д.? Извините, я не объявил, что вкладки не являются tab1, tab2 и т. Д., Это просто случайные имена. Я назвал их так для демонстрации.

Ответ №3:

Просто замените все эти операторы if на этот код

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