Naviga attraverso la lista usando i tasti freccia? (JavaScript/JQ)

Question

Non riesco a trovare una risposta a come ottenerlo, tuttavia è una funzionalità che ho visto diverse volte. Essenzialmente sto echeggiando un elenco e vorrei creare la possibilità di evidenziare e selezionare questi elementi usando i tasti freccia/invio. Qualcuno può aiutarmi a darmi un'idea su come posso realizzare questo? So come usare i keycode (ovviamente), ma non come trasformarlo in codice funzionante per selezionare gli elementi in una lista ...

Stavo pensando che forse avrei dovuto avere una specie di pulsante radio nascosto per contrassegnalo come selezionato o meno ... ma anche in quel caso non so come saltare da un pulsante all'altro verso l'alto e verso il basso nell'elenco. Quindi se qualcuno potesse darmi una mano con questo lo apprezzerei molto. Grazie.

Answer 1

Dato che non hai davvero spiegato con cosa stai avendo problemi, ho appena creato una soluzione generale. Speriamo che questo aiuta:

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

Questo può dipendere dal browser. Sembra funzionare solo se gli ingressi radio sono uno accanto all'altro (anche l'etichetta è ok).

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

Ma questo si romperà radionavigazione in Firefox e probabilmente altri browser:

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

Questo è fastidioso, non appena si vuole fare qualcosa di un po 'più complesso di un semplice elenco (categorie .. .).

Answer 3

Il mio esempio per nativo 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) { 
 
\t \t \t removeClass(liSelected, 'selected'); 
 
     next = ul.getElementsByTagName('li')[index]; 
 
     if(typeof next !== undefined && index <= len) { 
 
     
 
       liSelected = next; 
 
      } else { 
 
       \t index = 0; 
 
       liSelected = ul.getElementsByTagName('li')[0]; 
 
      } 
 
      addClass(liSelected, 'selected'); 
 
      console.log(index); 
 
    } 
 
    else { 
 
    index = 0; 
 
    
 
    \t liSelected = ul.getElementsByTagName('li')[0]; 
 
\t \t \t addClass(liSelected, 'selected'); 
 
    } 
 
    } 
 
    else if (event.which === 38) { 
 
    
 
    //up 
 
    if (liSelected) { 
 
\t \t \t removeClass(liSelected, 'selected'); 
 
     index--; 
 
     console.log(index); 
 
     next = ul.getElementsByTagName('li')[index]; 
 
     if(typeof next !== undefined && index >= 0) { 
 
       liSelected = next; 
 
      } else { 
 
      \t \t index = len; 
 
       liSelected = ul.getElementsByTagName('li')[len]; 
 
      } 
 
      addClass(liSelected, 'selected'); 
 
    } 
 
    else { 
 
    index = 0; 
 
    \t liSelected = ul.getElementsByTagName('li')[len]; 
 
\t \t \t 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/