使用向下箭头选择下一个列表项答案

【问题标题】：Selecting next list item with down arrow使用向下箭头选择下一个列表项
【发布时间】：2018-08-16 02:30:05
【问题描述】：

给定一个 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 链接：link

【问题讨论】：

您需要将 'ag-menu-option-active' 类添加到下一个元素并将其从上一个元素中删除。还需要注意边界条件，希望对您有所帮助。
@user6761351 - ag-menu-option-active 类已应用于下一个元素，并在用户将鼠标悬停在列表项上时从前一个元素中删除。我试图弄清楚的一件事是为什么列表中的第二个元素总是在向下箭头上显示活动类，无论如何。
它不是第二个项目，它是第一个，您正在打印第二个 columnMenuItems[i + 1]
添加相同的代码

标签： javascript

【解决方案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"
}

您可以编写一些其他逻辑来添加和删除类，但这应该适用于向下箭头。

【讨论】：

【解决方案2】：

您在调用 .click() 方法时缺少 +/-；此外，为了防止未定义的错误，您应该在第一个 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;
      }
    }
  }

测试一下here (jsfiddle)

【讨论】：