用向下箭頭選擇下一個列表項

Question

給定一個div列表，我需要能夠使用上下箭頭鍵在列表中的項目之間導航，將.ag-menu-option-active類應用於當前選定的項目，並按Enter鍵觸發單擊當前選擇的列表項。

我目前可以遍歷項目列表，但是在向下箭頭上，它僅注銷列表中的第二個項目。 如上所述，用戶應該能夠在列表中上移和下移，並將活動類別應用於當前選定的項目。 當用戶Enter鍵時，應單擊關聯的列表項。

let columnMenuItems = document.querySelectorAll('.ag-menu-option');
document.addEventListener('keydown', e => {
  if (e.key === 'ArrowDown') {
    for (let i = 0; i < columnMenuItems.length; i++) {
      if (columnMenuItems[i].classList.contains('ag-menu-option-active') === true) {
        console.log("MENU OPTION SELECTED: ", columnMenuItems[i + 1])
        columnMenuItems[i].click();
        break;
      }
    }
  }
});

JSFiddle鏈接： 鏈接

Answer 1

if(columnMenuItems[i+1] !== undefined){
    //add class to next 
    columnMenuItems[i+1].className= "ag-menu-option ag-menu-option-active"

    columnMenuItems[i].className= "ag-menu-option"
}

您可以編寫其他一些邏輯來添加和刪除類，但這對於向下箭頭應該起作用。

Answer 2

調用.click（）方法時，缺少+/-。 另外，為防止發生未定義的錯誤，您應該在first for循環中添加columnMenuItems-1。

代碼應如下所示-

if (e.key === 'ArrowDown') {
    for (let i = 0; i < columnMenuItems.length-1; i++) {
      if (columnMenuItems[i].classList.contains('ag-menu-option-active') === true) {
        console.log("MENU OPTION SELECTED: ", columnMenuItems[i + 1]);
        columnMenuItems[i].classList.remove('ag-menu-option-active');
        columnMenuItems[i + 1].click();
        columnMenuItems[i+1].classList.add('ag-menu-option-active');
        break;
      }
    }
  }

  if (e.key === 'ArrowUp') {
    for (let i = columnMenuItems.length - 1; i > 0; i--) {
      //console.log("MENU OPTIONS: ", columnMenuItems[i]);
      if (columnMenuItems[i].classList.contains('ag-menu-option-active') === true) {
        columnMenuItems[i].classList.remove('ag-menu-option-active');
        //if (e.key === 'Enter') {
          columnMenuItems[i - 1].click();
        columnMenuItems[i-1].classList.add('ag-menu-option-active');
        //}
        break;
      }
    }
  }

在這里測試（jsfiddle）