javascript - 使用箭头键将单击事件设置为容器中的下一个选项卡

Question

我有一个带有三个选项卡的过滤器容器。当前选定的选项卡具有 ag-tab-selected 类。当容器加载时，第一个选项卡始终处于选中状态并且具有 ag-tab-selected 类。我需要能够使用左右箭头键在选项卡之间导航。

当用户点击右箭头键时，ag-tab-selected 类应该应用到下一个选项卡，如果点击左箭头键，ag-tab -selected 类应该应用于上一个选项卡。当前选项卡还应应用 .click()，以便当用户按下箭头键时， View 会根据选择的选项卡进行更改。我目前能够循环浏览可用的选项卡并将触发器应用于当前选项卡，但无法使用箭头键迭代到上一个或下一个:

if(e.key === 'ArrowRight') {
 for(let i = 0; i < tabTriggers.length; i++){
   //on arrow, trigger currently focused ag-tab with click
   if(tabTriggers[0].classList.contains('ag-tab-selected') === true){
     tabTriggers[i].click();
   }
 }
}

当前 fiddle 的链接:Link

Answer 1

我根据你提供的代码完成了任务，我还用一些逻辑扩展了它，这样你就有了一个工作示例。在这里可用 http://jsfiddle.net/631zjmcq/

所以我为每个选项卡定义了一个点击处理程序，以便您获得一些交互性(我想看看实际的解决方案) 您提供的代码的基础运行良好，只是有一个问题，即一旦找到一个元素，您就不会停止循环，它会一直运行直到到达列表中的最后一个元素。这意味着它会点击每个元素，直到它到达最后一个元素，所以我在那个 for 循环中放入了一个 break 语句。

为了向后，我修改了 for 循环，所以这次它会从列表的末尾向后循环。

const selectedTabClass = 'ag-tab-selected';

document.querySelectorAll('.ag-tab').forEach(tab => {
    tab.addEventListener('click', e => {
    if (tab.classList.contains('ag-tab-selected')) return

    document.querySelector(`.${selectedTabClass}`)
        .classList.remove(selectedTabClass)
        tab.classList.add(selectedTabClass)
  })
})

document.addEventListener('keydown', e => {
  let tabTriggers = document.querySelectorAll('.ag-tab');

  if (e.key === 'ArrowRight') {
    for (let i = 0; i < tabTriggers.length; i++) {
      if (tabTriggers[i].classList.contains('ag-tab-selected') === true) {
        tabTriggers[i+1].click();
        break;
      }
    }
  }

  if (e.key === 'ArrowLeft') {
    for (let i = tabTriggers.length-1; i > 0; i--) {
      if (tabTriggers[i].classList.contains('ag-tab-selected') === true) {
        tabTriggers[i-1].click();
        break;
      }
    }
  }
});