Как оптимизировать js код переключения контента?

Question

[Тест Тестов]

Написал на чистом js переключатель контента по клику на соответствующее название
При клике на название платформы меняется ее описание
Не очень опытен в javascript и понимаю, что код получился просто ужасный, поэтому спрашиваю как его оптимизировать?

Comments

[Вадим]

1. Перестать опираться на id. У элементов есть общий класс. Цель можно обозначить в кастомном data-атрибуте.
https://learn.javascript.ru/dom-attributes-and-pro...
2. В следствии пункта 1. сделать единый обработчик, для всех элементов одного класса, а не на каждый элемент вешать свой обработчик. Отношение между табом и контентом таба на основе значения дата-атрибута.
3. Не нужно каждый раз искать активный элемент при клике чтобы убрать у него класс активности. При назначении активности складывайте ссылку на этот элемент в переменную типа activTab. Поиск во всём документ дорогая операция. И чем больше DOM дерево - тем дороже.
4. Почитать про делегирование событий

5. Ну и как точка роста - переписать на javascript class, Где будет прописываться соотношение при инициализации к какому табу какой контент относится. Это сделает более безопасным разметку от вмешательства. Но это такое, скорее на практику и развитее больше.

Answer 1

[kanifas]

Можно скрипт к такому виду привести

const platformButtons = document.querySelectorAll(".changer__platform");
const activeTargetClass = "platform__description_active";

platformButtons.forEach(tab => tab.addEventListener("click", () => {
    const target = document.querySelector(`#${tab.id}_desc`);
    const currentTarget = document.querySelector(`.${activeTargetClass}`);
    currentTarget && currentTarget.classList.remove(activeTargetClass);
    target && target.classList.add(activeTargetClass);
}));

Или короче для современных браузеров

const platformButtons = document.querySelectorAll(".changer__platform");
const activeTargetClass = "platform__description_active";

platformButtons.forEach(tab => tab.addEventListener("click", () => {
    document.querySelector(`.${activeTargetClass}`)?.classList.remove(activeTargetClass);
    document.querySelector(`#${tab.id}_desc`)?.classList.add(activeTargetClass);
}));

Answer 2

[Сергей Соколов]

Признаки, что в коде можно что-то улучшить:

1. повторяется похожий код, с каждым разом меняется лишь что-то небольшое – может, заменить на цикл или функцю?
   
2. повторяется текстовая строка, например, имя класса — в константу её
   
   

Раз тут соблюдается некий принцип именования классов и id, можно отталкиваться от общего списка:
в функции changeTo() повторяются одинаковые действия. Сможете выдвинуть их во внешнюю функцию?