Установка события клика для следующей вкладки в контейнере с помощью клавиш со стрелками

Question

У меня есть контейнер с фильтром с тремя вкладками. В текущей выбранной вкладке есть класс ag-tab-selected, Когда контейнер загружается, первая вкладка всегда выбрана и имеет ag-tab-selected учебный класс. Мне нужно иметь возможность перемещаться между вкладками с помощью клавиш со стрелками влево и вправо.

Когда пользователь нажимает правую клавишу со стрелкой, ag-tab-selected класс должен быть применен к следующей вкладке, и если нажать левую клавишу со стрелкой, ag-tab-selected Класс должен быть применен к предыдущей вкладке. Текущая вкладка также должна иметь .click() применяется к нему, так что когда пользователь нажимает клавишу со стрелкой, вид меняется в зависимости от того, какая вкладка выбрана. В настоящее время я могу просмотреть доступные вкладки и применить триггер к текущей, но у меня возникают проблемы при переходе к предыдущей или следующей клавише со стрелкой:

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();
   }
 }
}

Ссылка на текущую скрипку: Ссылка

Answer 1

Я закончил задачу на основе предоставленного вами кода, а также расширил его с помощью некоторой логики, чтобы у вас был рабочий пример. Это доступно здесь http://jsfiddle.net/631zjmcq/

Итак, я определил обработчик кликов для каждой вкладки, чтобы вы получили некоторую интерактивность (я хотел увидеть решение в действии). Основа кода, который вы предоставили, работала хорошо, просто возникла проблема, когда вы нашли элемент Вы не остановили цикл, и он работал до тех пор, пока не достиг последнего элемента в списке. Это означает, что он нажимал на каждый элемент, пока не достиг последнего, поэтому я поместил в него оператор 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;
      }
    }
  }
});