Добавление «For Loop» вместо «forEach»

Question

Это:

function hideAllButtons(button) {
  button.querySelectorAll(".play, .pause, .speaker").forEach(hide);
}

Изменено на это:

https://jsfiddle.net/pezuLqvo/95/

  function hideAllButtons(button) {
    const buttons = button.querySelectorAll(".play, .pause, .speaker");
    for (let i = 0; i < buttons.length; i += 1) {
      hide(buttons[i]);
    }
  }

Какя бы добавил для цикла к этому коду?

  function hideAllButtons(button) {
    const buttonSelectors = ".play, .pause, .speaker";
    button.querySelectorAll(buttonSelectors).forEach(hide);
  }

Я поднялся так далеко:

function hideAllButtons(button) {
  const buttonSelectors = ".play, .pause, .speaker";
  for (let i = 0; i < buttons.length; i += 1) {
    hide(buttons[i]);
  }
}

Где быэто идти?

(buttonSelectors)

Answer 1

Точно так же, как ваш пример, под селекторами, чтобы получить выбранные кнопки.

function hideAllButtons(button) {
  const buttonSelectors = ".play, .pause, .speaker";

  // Use the selectors to get all the buttons
  const buttons = document.querySelectorAll(buttonSelectors);

  for (let i = 0; i < buttons.length; i += 1) {
    hide(buttons[i])
  }
}

Answer 2

Возможно, вы захотите использовать document.querySelectorAll, чтобы получить все элементы, соответствующие вашему запросу.

function hideAllButtons(button) {
  const buttonSelectors = ".play, .pause, .speaker"

  const buttons = document.querySelectorAll(buttonSelectors)

  for (let i = 0; i < buttons.length; i += 1) {
    hide(buttons[i])
  }
}

Answer 3

• Аргумент button для функции не используется.
• Нет смысла создавать переменную, которая используется только один раз, поэтому исключите константу buttonSelectors и просто получите всеКнопки.

• (FYI), .forEach() не работает во всех браузерах в списках узлов, поэтому, если вы его используете, сначала преобразуйте список узлов в массив и вызовите .forEach() onмассив.Вот пример того, как это сделать:

  let btnArray = Array.prototype.slice.call(document.querySelectorAll(".play, .pause, .speaker")); btnArray.forEach(. . .)

Итак, на ваш вопрос:

function hideAllButtons() {

  // Get the buttons node list
  let buttons = document.querySelectorAll(".play, .pause, .speaker");

  // Loop over them
  for (let i = 0; i < buttons.length; i++) {
    hide(buttons[i]);
  }
}

Answer 4

  function hideAllButtons(button) {
    const buttonSelectors = ".play, .pause, .speaker";
    const buttons = button.querySelectorAll(buttonSelectors);
    for (let i = 0; i < buttons.length; i += 1) {
      hide(buttons[i]);
    }
  }