Как добавить класс для слайдера?

Question

[fgehte]

Как написать максимально лаконичный код на js(с методами и тд), чтобы при нажатии на любой слайдер (отличный от активного) класс 'active' добавлялся нажатому, а с предыдущего удалялся?
Html:

<button class="slider-btn slider-btn--active" aria-label="Первый переключатель слайдера" disabled></button>
<button class="slider-btn" aria-label="Второй переключатель слайдера"></button>
<button class="slider-btn" aria-label="Третий переключатель слайдера"></button>

У самого получилось грамоздко, не могу допереть как уменьшить и сделать более отзывчивым к кол-ву кнопок
Js:

const sliderBtn = document.querySelectorAll('.slider-btn');
sliderBtn.forEach((btn, i) => {
  btn.addEventListener('click', function () {
    if (i == 0) {
      sliderBtn[i].classList.add('slider-btn--active');
      sliderBtn[i].disabled = true;
      sliderBtn[i+1].classList.remove('slider-btn--active');
      sliderBtn[i+1].disabled = false;
      sliderBtn[sliderBtn.length - 1].classList.remove('slider-btn--active');
      sliderBtn[sliderBtn.length -1].disabled = false;
    } else if (i == 1) {
      sliderBtn[0].classList.remove('slider-btn--active');
      sliderBtn[0].disabled = false;
      sliderBtn[i].classList.add('slider-btn--active');
      sliderBtn[i].disabled = true;
      sliderBtn[sliderBtn.length - 1].classList.remove('slider-btn--active');
      sliderBtn[sliderBtn.length - 1].disabled = false;
    } else {
      sliderBtn[0].classList.remove('slider-btn--active');
      sliderBtn[0].disabled = false;
      sliderBtn[i-1].classList.remove('slider-btn--active');
      sliderBtn[i-1].disabled = false;
      sliderBtn[i].classList.add('slider-btn--active');
      sliderBtn[i].disabled = true;
    }
  });
});

Answer 1

[Степан Турченко]

Отдельно вынести функцию, в которую оборачивать нужные элементы:

const Add=(el)=>el.classList.add('slider-btn--active')
const Dell=(el)=>el.classList.remove('slider-btn--active');
const On=(el)=>el.disabled=true;
const Off=(el)=>el.disabled=false;

Comments

[fgehte]

Спасибо за ответ! Но я, наверно, немного не правильно задал вопрос. Изначально на первом кнопке слайдера уже висит класс "slider-btn--active", при нажатие на второй-третий и тд. с первой кнопки этот класс должен убираться, а на нажатые вешиться, отсюда вопрос можно ли как то обойтись без проверки if else?

[Степан Турченко]

Так же в отдельной функции написать один раз проверку , а потом отправлять в эту функцию элемент , и если класс есть, то убрать, а есои нету, то добавлять