Question

.main > div{
  float: left;
  height: 100px;
  width: 200px;
}
.yellow{
  background: yellow;
}
.red{
  background: red;
}
.green{
  background: green;
}
.black{
  background: black;
}

这是我的代码，我在＆＃34; fields1＆＃34;中有多个字段。变量但循环只在第一项上执行，我必须每次为每个元素执行函数。请帮助我，请仅使用 JavaScript 。

Here是完整的代码。但是相信我，你只需要看一下这个功能，根据我的说法只需要一行，休息时你必须比我更清楚，我是新手。

Answer 1

问题是getElementsByClassName返回实时收藏。因此，当您切换类时，您选择了元素，它会更改集合。您可以使用querySelectorAll来避免在迭代时发生变异。

var red = document.getElementsByClassName('red');

// logs 2 times
[].forEach.call(red, function(field) {
  field.classList.toggle('red') // this line "skips" next field
  console.log(field.value)
})


var blue = document.querySelectorAll('.blue');

// logs 4 times
[].forEach.call(blue, function(field) {
  field.classList.toggle('blue')
  console.log(field.value)
})

<input class="red" value="red1">
<input class="red" value="red2">
<input class="red" value="red3">
<input class="red" value="red4">
<input class="blue" value="blue1">
<input class="blue" value="blue2">
<input class="blue" value="blue3">
<input class="blue" value="blue4">

为什么我的forEach循环只占用一个值而我的变量中有更长的HTMLcollection？

1 个答案: