Как скрыть все элементы, имеющие один класс JS?

Question

Есть элементы списка:

<ul id="material-name-list">
  <li class="ldsp">Элемент</li>
  <li class="ldsp">Элемент</li>
  <li class="mdf">Элемент</li>
  <li class="mdf">Элемент</li>
</ul>

<a href="#" onclick="ldsp()">ЛДСП</a>
<a href="#" onclick="mdf()">МДФ</a>

Есть функции, вызываемые при клике на ссылки:

function ldsp() {
    document.getElementsByClassName('ldsp').style.display = 'block';
    document.getElementsByClassName('mdf').style.display = 'none';
}

function mdf() {
    document.getElementsByClassName('ldsp').style.display = 'none';
    document.getElementsByClassName('mdf').style.display = 'block';
}

Но почему-то функции не работают. Как сделать правильно, чтобы при клике на ссылку, всем элементам определенного класса присваивался стиль display="none"?

Answer 1

getElementsByClassName возвращает колекцию элементов. Как следствие, нужно использовать что-то для прохода по коллекции, т.е. использовать цикл

БЛОГ НА HUSL

Как скрыть все элементы, имеющие один класс JS?

Ответы (1 шт):