Как можно сделать код на Javascript более оптимальным?

Question

[Михаил]

Есть пример вёрстки с javascript кодом. Но код очень длинный. И по всей видимости не самый оптимальный. Как его можно оптимизировать? Чтобы он был более коротким, читабельным и т.п.
Суть кода этого примера в том, что есть 10 иконок. При нажатии на иконку появляется текстовый блок с информацией. А если нажать на вторую иконку, то первый блок исчезает и появляется второй и т.д.
Вот этот пример:
https://codepen.io/mk3mk/pen/aXBeMb?editors=0010

Answer 1

[0xD34F]

Вместо того, чтобы вручную переключать классы каждого блока, сделаем функцию, которая будет принимать блок в качестве параметра и выполнять все необходимые действия:

function toggleClasses(block) {
  const info = block.querySelector('.infoWrapper');
  block.classList.toggle('marginBottom10');
  block.classList.toggle('marginBottom120');
  info.classList.toggle('displayNone');
  info.classList.toggle('displayBlock');
}

Подключение отдельных обработчиков клика к каждой кнопке заменим одним делегированным обработчиком, а вместо ручного перебора всех блоков просто будем искать открытый:

document.addEventListener('click', function(e) {
  const block = e.target.closest('.blockSvg');
  if (block) {
    const prevBlock = document.querySelector('.blockSvg.marginBottom120');
    if (prevBlock && prevBlock !== block) {
      toggleClasses(prevBlock);
    }

    toggleClasses(block);
  }
});

В результате, объём кода сократился на два порядка.

Ну и конечно, надо перевёрстывать, потому что вот это вот "подправляем положение блоков" - позорище какое-то.

Comments

[Михаил]

0xD34F , спасибо Вам огромное ! очень помогли ! Конечно, тут надо перевёрстывать...