Выберите ВСЕ getElementsByClassName на странице без указания [0] и т. Д. - PullRequest
Новая
       18

Выберите ВСЕ getElementsByClassName на странице без указания [0] и т. Д.

0 голосов
/ 23 апреля 2019

Я пытаюсь создать функцию как часть сайта WordPress, чтобы показать / скрыть элементы страницы с определенным классом. Например. любые элементы страницы (строки, контейнеры, текстовые блоки и т. д.), использующие класс 'show-hide', должны быть скрыты / показаны одним нажатием кнопки.

У меня это работает, но я уверен, что должен быть лучший метод для достижения аналогичного результата. Я хотел бы иметь возможность выбрать ВСЕ классы show-hide на странице без указания числа ([1], [2], [3], [3], [6] ...) для каждого раза, когда б.

Я действительно новичок в javascript, поэтому любая помощь или совет, касающиеся генерации диапазона значений или использования подстановочных символов *, будут приветствоваться. 

function myFunction() {
  var x = document.getElementsByClassName("show-hide");

  if (x[0].style.display === "none") {
    x[0].style.display = "block";
  } else {
    x[0].style.display = "none";
  }
  if (x[1].style.display === "none") {
    x[1].style.display = "block";
  } else {
    x[1].style.display = "none";
  }
  if (x[2].style.display === "none") {
    x[2].style.display = "block";
  } else {
    x[2].style.display = "none";
  }
  if (x[3].style.display === "none") {
    x[3].style.display = "block";
  } else {
    x[3].style.display = "none";
  }
}

Ответы [ 3 ]

1 голос
/ 23 апреля 2019

Как ответили выше, вы можете использовать цикл.Вот сокращение: 

for(let elem of Array.from(document.getElementsByClassName("show-hide"))) {
   elem.style.display = (elem.style.display === 'block') ? 'none' : 'block';
}
0 голосов
/ 23 апреля 2019

Вы можете создать массив из вашей HTML-коллекции и просто использовать карту: 

function myFunction() {

  Array.from(document.getElementsByClassName("show-hide")).map(function(elem){
    if (elem.style.display === "none") { 
      elem.style.display = "block" 
    } else {
      elem.style.display = "none";
    }
  })

};
0 голосов
/ 23 апреля 2019

Как отмечено в комментариях, вы ищете цикл: 

function myFunction() {
  var x = document.getElementsByClassName("show-hide");

  [...x].forEach(xx => {
    if (xx.style.display === "none") {
      xx.style.display = "block";
    } else {
      xx.style.display = "none";
    }
  });
}

Обратите внимание на оператор распространения [...x], который преобразует иттебел (в данном случае HTMLCollection) в массив.

...