Как привязать обработчик keydown на группу кнопок js

Question

Всем привет, друзья!!! Есть 4 кнопки - они же являются кнопками пагинацией для слайдера http://prntscr.com/swldv8..

<nav id="nav-dots" class="nav-dots header-tabs">
  <div class="header-container">
    <button autofocus class="nav-dot-current tab active">Сервисное<br> обслуживание</button>
    <button autofocus class="tab">Электроинструмент</button>
    <button autofocus class="tab">Расходные<br> материалы</button>
    <button autofocus class="tab">Строительный<br> консалтинг</button>
    <button class="active-slide"></button>
  </div>
</nav>

5-ая кнопка - ативная, плавно перетекающая полоса, при клике на кнопку. Необходимо, чтобы при переключении стрелок "влево" и "вправо" к активной кнопке, добавлялся класс active. Уже битый час сижу, не пойму, как это реализовать... выручайте, друзья!!! Вот фрагмент js кода,

var tabs = document.getElementsByClassName('tab');

Array.prototype.forEach.call(tabs, function (tab) {
    tab.addEventListener('click', setActiveClass);
    tab.addEventListener('keydown', function (e) {
        if (e.keyCode == 37 || e.keyCode == 39) {
            return setActiveClass();
        }
    });

    function setActiveClass(evt) {
        Array.prototype.forEach.call(tabs, function (tab) {
            tab.classList.remove('active');
        });

        evt.currentTarget.classList.add('active');
    }
 
});

на котором я застрял

Answer 1

Разобрался сам. Вот код, может кому-то пригодится

$(document).ready(function () {
    $('.tab').click(function () {
        $('.tab').removeClass('active').eq($(this).index()).addClass('active');
    });
    $('.tab').keydown(function (e) {
        var tab = $('.header-container');

        if (e.keyCode == 39) {
            $('.nav-dot-current').next().addClass('active').prev().removeClass('active');
            console.log("тоже норм");
            if ($('.tab').eq(3).hasClass('nav-dot-current')) {
                $('.tab').eq(1).prev().addClass('active');
            }
        } else if (e.keyCode == 37) {
            if ($('.tab').eq(0).hasClass('nav-dot-current')) {
                $('.tab').eq(3).addClass('active');
                $('.tab').eq(0).removeClass('active');
            }
            $('.nav-dot-current').prev().addClass('active').next().removeClass('active');
        }
    });
});

БЛОГ НА HUSL

Как привязать обработчик keydown на группу кнопок js

Ответы (1 шт):