Перемещение по нескольким спискам с помощью клавиш со стрелками/jQuery?

Question

This question имеет полезный ответ, показывающий, как использовать jQuery для перемещения вверх и вниз по списку, который вы можете увидеть here. Код:

var li = $('li'); 
var liSelected; 
$(window).keydown(function(e){ 
    if(e.which === 40){ 
     if(liSelected){ 
      liSelected.removeClass('selected'); 
      next = liSelected.next(); 
      if(next.length > 0){ 
       liSelected = next.addClass('selected'); 
      }else{ 
       liSelected = li.eq(0).addClass('selected'); 
      } 
     }else{ 
      liSelected = li.eq(0).addClass('selected'); 
     } 
    }else if(e.which === 38){ 
     if(liSelected){ 
      liSelected.removeClass('selected'); 
      next = liSelected.prev(); 
      if(next.length > 0){ 
       liSelected = next.addClass('selected'); 
      }else{ 
       liSelected = li.last().addClass('selected'); 
      } 
     }else{ 
      liSelected = li.last().addClass('selected'); 
     } 
    } 
}); 

Я хочу достичь чего-то подобного, но немного сложнее. Вместо одного списка у меня будет несколько списков на моей странице. Я установил их так, чтобы их можно было вставить в закладки. После того, как этот список имеет фокус, я хочу, чтобы клавиши со стрелками вверх/вниз перемещались по списку.

Я также хотел бы понять, почему выше код добавляет/удаляет класс, а не на самом деле дает фокус элементу с помощью element.focus();

Мой HTML разметка:

<ul tabindex="0" id="client-list" class="tabbable"> 
    <li tabindex="-1">Client 1</li> 
    <li tabindex="-1">Client 2</li> 
</ul> 

<ul tabindex="0" id="product-list" class="tabbable"> 
    <li tabindex="-1">Product 1</li> 
    <li tabindex="-1">Product 2</li> 
</ul> 

Я попытался вносящий изменения в функцию keydown к проверить, какой элемент в настоящее время активен:

if (tabList.hasFocus) {... 

Но напрасно. Я думаю, что это не стартер, потому что этот элемент не будет иметь фокуса, но ребенок будет li предметов.

Answer 1

Я изменил существующий код в вашей скрипке работы:

http://jsfiddle.net/path411/8Pku9/

var $liSelected; 
var $ulSelected; 
$(window).keydown(function(e) { 
    // Make sure we have a ul selected 
    if($ulSelected) { 

     if(e.which === 40) {    
      if($liSelected) { 
       $liSelected.removeClass('selected'); 
       var $next = $liSelected.next(); 
       if($next.length) { 
        $liSelected = $next.addClass('selected'); 
       } 
       else { 
        $liSelected = $ulSelected.children('li').first().addClass('selected'); 
       } 
      } 
      else { 
       $liSelected = $ulSelected.children('li').first().addClass('selected');    
      } 
     }else if(e.which === 38) {    
      if($liSelected) { 
       $liSelected.removeClass('selected'); 
       var $prev = $liSelected.prev(); 
       if($prev.length) { 
        $liSelected = $prev.addClass('selected'); 
       } 
       else { 
        $liSelected = $ulSelected.children('li').last().addClass('selected'); 
       } 
      } 
      else { 
       $liSelected = $ulSelected.children('li').last().addClass('selected');    
      } 
     } 

    } 
}); 


$('ul').focus(function(e) { 
    $ulSelected = $(this); 
    $liSelected.removeClass('selected'); 
    $liSelected = false; 
}); 

• Первое, что нужно сделать было спасти, которое уль фокусировалось с помощью $.focus().

• .next() и .prev() уже работают только с братьями и сестрами, поэтому, используя 2 разных uls, эта функциональность работает нормально.

• На первом нажатии вверх/вниз, а также, если вы хотите, чтобы перебрать последние/первые пункты, я должен был изменить отыскание first()/last() от выбранных ул, сохраненные ранее, а не глобальный список of lis.

• В моем редактировании я изменил сохраненные элементы jquery, чтобы использовать более распространенную семантику при запуске их имени с помощью $, это не является необходимым изменением.

Чтобы ответить на другой вопрос, используя классы вместо .focus, намного легче следить за выбранным элементом, а также стиль его.