Question

在我的示例中，我试图遍历HTML元素的集合，并检查它们是否与屏幕上的按钮单击匹配。但是循环似乎只检查第一个html元素，如果单击了另一个按钮，则不会再次运行该函数。

keyboard.onclick = function(event) {
  event.target.className += " chosen";
  let letterFound = event.target.innerHTML;
  checkLetter(letterFound);
}

const checkLetter = (a) => {
  let letterCheck = document.querySelectorAll('.letter');

  for (i = 0; i < letterCheck.length; i++) {
    if (a === letterCheck[i].innerHTML) {
      letterCheck[i].className += " show";
      let letterMatch = letterCheck[i];

      return letterMatch
    } else {
      return null;
    }
  }
}

Answer 1

我将使用es6中的过滤器功能来实现此目的，并以更具功能性的方式解决该问题。因此，如果您需要支持旧版浏览器，则可以使用babeljs来转译代码。如今，基本上没有什么可以阻止您使用新的js功能，因为使用babel可以转换所有内容。

const matchingLetters = document.querySelectorAll('.letter').filter(elem => elem.innerHtml === a);
// now you can use the filtered array to do something with your matchingLetters.
// e.g. use .map or do some loop etc.

JS for循环的问题

1 个答案: