Навигация по списку с помощью клавиш со стрелками?(JavaScript / JQ)

Question

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

Я думал, может быть, мне понадобится какое-то скрытое радиокнопка, чтобы пометить его как выбранный или нет ... но даже тогда я не знаю, как я прыгнул бы с одной радиокнопки на другую вверх и вниз по списку.Так что, если бы кто-нибудь мог мне помочь, я был бы очень благодарен.Спасибо.

Answer 1

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

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

JSFiddle: http://jsfiddle.net/Vtn5Y/

Answer 2

Мой пример для нативного JavaScript

var ul = document.getElementById('list');
var liSelected;
var index = -1;

document.addEventListener('keydown', function(event) {
var len = ul.getElementsByTagName('li').length-1;
  if(event.which === 40) {
index++;
  //down 
  if (liSelected) {
			removeClass(liSelected, 'selected');
      next = ul.getElementsByTagName('li')[index];
      if(typeof next !== undefined && index <= len) {
      
                liSelected = next;
            } else {
             	index = 0;
                 liSelected = ul.getElementsByTagName('li')[0];
            }
            addClass(liSelected, 'selected');
            console.log(index);
    }
    else {
    index = 0;
    
   	 liSelected = ul.getElementsByTagName('li')[0];
			 addClass(liSelected, 'selected');
    }
  }
  else if (event.which === 38) {
  
  //up
    if (liSelected) {
			removeClass(liSelected, 'selected');
      index--;
      console.log(index);
      next = ul.getElementsByTagName('li')[index];
      if(typeof next !== undefined && index >= 0) {
                liSelected = next;
            } else {
            		index = len;
                 liSelected = ul.getElementsByTagName('li')[len];
            }
            addClass(liSelected, 'selected');
    }
    else {
    index = 0;
   	 liSelected = ul.getElementsByTagName('li')[len];
			addClass(liSelected, 'selected');
    }
  }
}, false);

function removeClass(el, className) {
    if(el.classList) {
        el.classList.remove(className);
    } else {
        el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
    }
};

function addClass(el, className) {
    if(el.classList) {
        el.classList.add(className);
    } else {
        el.className += ' ' + className;
    }
};

li.selected {background:yellow}

<ul id="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

https://jsfiddle.net/m6watqpe/

Answer 3

Это может зависеть от браузера. Кажется, это работает, только если радиовходы расположены рядом (метка тоже в порядке).

<input type="radio" ... /> 
<input type="radio" ... />
<input type="radio" ... />

Но это нарушит радионавигацию в Firefox и, возможно, в других браузерах:

<div><input type="radio" ... /> ... </div>
<div><input type="radio" ... /> ... </div>

Это раздражает, когда вы хотите сделать что-то более сложное, чем простой список (категории ...).