Вы часами пытались понять, как показать и скрыть информацию на вашей веб-странице с помощью JavaScript? Тогда этот пост для вас. :)

Проблема: при рефакторинге моего журнала тяжелой атлетики на Rails и JavaScript я хотел аккуратно показать список упражнений пользователя, например. «Жим лежа», номер каждого подхода, а также количество повторений и вес в каждом подходе.

Работая с наставником по программной инженерии, он предложил мне написать план каждого HTML-элемента в фиктивном файле, отдельном от моего кода. Использование HTML в качестве шаблона помогло мне четко визуализировать то, что я хотел, без беспорядка, возникающего при просмотре HTML в DOM. Как сказал мой наставник, четкий код — это результат ясного мышления. Вот мой пример:

Наш элемент верхнего уровня — это ‹ul›, затем ‹li› для названия каждого упражнения. Каждое упражнение имеет ‹dl› с двумя ‹dt›, вложенными внутрь них. Как указано на w3school.com, тег ‹dl› определяет список описаний. Каждый ‹dl› используется вместе со списком ‹dt› для каждого термина/имени.

Вы увидите, что элемент ‹li› имеет идентификатор «set-1». Это элемент, на который я хочу нацелиться, потому что его дочерний элемент — это ‹dl›, на который мы хотим нацелиться, когда переключаем класс «hide-me». В вычислительной технике переключение означает переключение с одной функции на другую. В этом случае мы отключаем display: none, когда пользователь щелкает ссылку на упражнение.

Когда наша страница загрузится, наш ‹dl› с классом «hide-me» будет скрыт. Вот CSS, который мы можем добавить в наш элемент стиля:

.hide-me{ display: none}

При запуске события click наш класс hide-me выключит свойство display: none. Чтобы проиллюстрировать, когда переключатель добавляет HTML и удаляет его, давайте воспользуемся CSS-атрибутом :: after с элементом, который мы пытаемся выбрать. По умолчанию + загружается первым. Затем, когда откроется ‹dL›, класс будет свернут: после:

.reveal::after {content: "+";}
.collapse::after {content: "-"}

Вот остальная часть моего javascript:

  1. Выберите элемент dl внутри li #set-1 и отключите класс hide-me.
  2. Выберите ‹dl›, чтобы снова переключить класс раскрытия, чтобы добавить «+» после ‹a›.
  3. Выберите ту же ссылку, чтобы переключить класс свертывания, чтобы свернуть, чтобы отображать значок «-», когда

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

Реализация этой функции также научила меня сильным сторонам JS и CSS. CSS хорош для управления отображением элементов, в то время как JavaScript лучше реагирует на те события, которые, в свою очередь, переключают классы CSS.