代码之家 › 专栏 › 技术社区 › Matt

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

javascript

Matt · 技术社区 · 7 年前

给定一个div列表,我需要能够使用上下箭头键在列表中的项目之间导航,应用 .ag-menu-option-active 类到当前选定的项,并在 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;
      }
    }
  }
});

J小提琴链接: link

2 回复 | 直到 7 年前

Atul 7 年前

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"
}

您可以编写一些其他的逻辑来添加和删除类,但这对于向下箭头是有效的。

Nimitt Shah 7 年前

调用.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)

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

9 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

9 月前

Alex · 在轻量级中同时解构和不解构变量

9 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

9 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

9 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

9 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

9 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

9 月前

user3472810 · Angular@Output/EventEmitter返回undefined

9 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

9 月前