Điều hướng qua danh sách bằng các phím mũi tên? (JavaScript/JQ)

Question

Tôi dường như không thể tìm thấy câu trả lời cho cách thực hiện điều này, nhưng đó là một tính năng mà tôi đã nhìn thấy nhiều lần. Về cơ bản tôi đang lặp lại một danh sách và tôi muốn tạo khả năng đánh dấu và chọn các mục này bằng cách sử dụng các phím mũi tên/enter. Ai đó có thể giúp tôi một ý tưởng như thế nào tôi có thể thực hiện điều này? Tôi biết làm thế nào để sử dụng mã khóa (tất nhiên), chỉ cần không làm thế nào để biến nó thành mã chức năng để chọn các mục trên một danh sách ...

Tôi đã nghĩ rằng có lẽ tôi phải có một số loại nút radio ẩn đánh dấu nó như đã chọn hay không ... nhưng ngay cả sau đó tôi không biết làm thế nào tôi sẽ nhảy từ một nút radio đến khác lên và xuống danh sách. Vì vậy, nếu bất cứ ai có thể cho tôi một bàn tay với điều này tôi thực sự sẽ đánh giá cao nó. Cảm ơn bạn.

Answer 1

Vì bạn không thực sự giải thích những gì bạn đang gặp khó khăn, tôi vừa tạo ra một giải pháp chung. Hy vọng rằng đây sẽ giúp:

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

này có thể phụ thuộc vào trình duyệt. Dường như chỉ hoạt động nếu đầu vào radio nằm cạnh nhau (nhãn cũng được chấp nhận).

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

Nhưng điều này sẽ phá vỡ dẫn đường vô tuyến trong Firefox và có lẽ các trình duyệt khác:

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

Đây là khó chịu ngay khi bạn muốn làm một cái gì đó nhiều hơn một chút phức tạp hơn một danh sách đơn giản (loại .. .).

Answer 3

dụ của tôi cho mẹ đẻ 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/