@Akim41k
WEB-developer

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

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

  • Вопрос задан
  • 129 просмотров
Решения вопроса 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);
}));
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
sergiks
@sergiks Куратор тега JavaScript
♬♬
Признаки, что в коде можно что-то улучшить:
  1. повторяется похожий код, с каждым разом меняется лишь что-то небольшое – может, заменить на цикл или функцю?
  2. повторяется текстовая строка, например, имя класса — в константу её


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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы