让“For Loop”与“forEach”一样工作

Question

这个使用For循环

单击另一个按钮后，它们不会变回播放按钮，而是保持暂停状态。音频暂停没有问题，只是按钮由于某种原因没有变回。

https://jsfiddle.net/pezuLqvo/85/

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

function pauseAllButtons(buttons) {
  for (let i = 0; i < buttons.length; i += 1) {
    if (isPlaying(buttons[i])) {
      showPlayButton(buttons[i]);
    }
  }
}

function showPauseButton(button) {
  const pause = getPause(button);
  pauseAllButtons(button);
  hideAllButtons(button);
  show(pause);
  button.classList.add("active");
}

看看这个是如何设置的，你能确定我会在上面的代码中改变什么来解决这个问题吗？

这个使用 forEach

https://jsfiddle.net/pezuLqvo/84/

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

function pauseAllButtons() {
  const buttons = document.querySelectorAll(".playButton");
  buttons.forEach(function hidePause(button) {
    if (isPlaying(button)) {
      showPlayButton(button);
    }
  });
}

function showPauseButton(button) {
  const pause = getPause(button);
  pauseAllButtons();
  hideAllButtons(button);
  show(pause);
  button.classList.add("active");
}

Answer 1

这就是答案：

https://jsfiddle.net/pezuLqvo/93/

function pauseAllButtons() {
  const buttons = document.querySelectorAll(".playButton");
  for (let i = 0; i < buttons.length; i += 1) {
    if (isPlaying(buttons[i])) {
      showPlayButton(buttons[i]);
    }
  }
}