javascript - 如何使用箭头键浏览 元素 - jQuery？

Question

我正在尝试使用键盘箭头键在具有以下结构的列表项之间导航 - 感谢帮助

我不想在这里粘贴我自己的代码，因为它有很多与问题无关的属性。我可以为每个选定的项目添加一个类吗？

<div class="card-columns">
    <div class="card">
      <div class="card-body">
        <ul class="card-list">
           <a href="#">
             <li>Card Item1</li>            
           </a>
           <a href="#">
             <li>Card Item2</li>            
           </a>
           <a href="#">
             <li>Card Item3</li>            
           </a>
        </ul>
     </div>
   </div>
    <div class="card">
      <div class="card-body">
        <ul class="card-list">
           <a href="#">
             <li>Card Item3</li>            
           </a>
           <a href="#">
             <li>Card Item4</li>            
           </a>
           <a href="#">
             <li>Card Item5</li>            
           </a>
        </ul>
     </div>
   </div>
</div>

Answer 1

将所有 li 元素放入集合中并设置跟踪变量。然后为文档设置一个 keydown 事件处理程序，根据按下的键更改跟踪器变量，并将样式应用于其集合中具有与跟踪变量匹配的索引的元素。

有关详细信息，请参阅下面的内联评论:

// Get all the <li> elements into a collection
var listItems = document.querySelectorAll(".card-list li");

// Set up a counter to keep track of which <li> is selected
var currentLI = 0;

// Initialize first li as the selected (focused) one:
listItems[currentLI].classList.add("highlight");

// Set up a key event handler for the document
document.addEventListener("keydown", function(event){
  // Check for up/down key presses
  switch(event.keyCode){
    case 38: // Up arrow    
      // Remove the highlighting from the previous element
      listItems[currentLI].classList.remove("highlight");
      
      currentLI = currentLI > 0 ? --currentLI : 0;     // Decrease the counter      
      listItems[currentLI].classList.add("highlight"); // Highlight the new element
      break;
    case 40: // Down arrow
      // Remove the highlighting from the previous element
      listItems[currentLI].classList.remove("highlight");
      
      currentLI = currentLI < listItems.length-1 ? ++currentLI : listItems.length-1; // Increase counter 
      listItems[currentLI].classList.add("highlight");       // Highlight the new element
      break;    
  }
});

.highlight { background-color:#ff0; }

<div class="card-columns">
    <div class="card">
      <div class="card-body">
        <ul class="card-list">
           <a href="#">
             <li>Card Item1</li>            
           </a>
           <a href="#">
             <li>Card Item2</li>            
           </a>
           <a href="#">
             <li>Card Item3</li>            
           </a>
        </ul>
     </div>
   </div>
    <div class="card">
      <div class="card-body">
        <ul class="card-list">
           <a href="#">
             <li>Card Item3</li>            
           </a>
           <a href="#">
             <li>Card Item4</li>            
           </a>
           <a href="#">
             <li>Card Item5</li>            
           </a>
        </ul>
     </div>
   </div>
</div>