Question

我正在尝试学习javascript，我制作了一个带有一些盒子的网格，当我点击它时我试图改变网格框的颜色。我知道我可以使用jquery我做了它并且工作但我想用javascript只做这个，所以这是我的代码到目前为止：

numbers.Complex

我觉得这需要＆＃39; bind＆＃39;方法，我不知道绑定是如何工作的，所以有可能使它无需绑定吗？谢谢。

Answer 1

您不必声明单独的功能。您可以使用box类捕获所有元素，然后使用forEach()函数迭代它们，并将click事件绑定到每个元素。

注意：网格变量不是数组。它是一个类似于数组的对象。为了能够使用forEach()函数，您必须使用Array#from将其更改为数组。

var grid = document.getElementsByClassName('box');

Array.from(grid).forEach(v => v.addEventListener('click', function() {
  v.style.background = 'black';
}));

.box {
  height: 100px;
  width: 100px;
  background: lightgreen;
  margin: 5px;
}

<div class='box'></div>
<div class='box'></div>

Answer 2

第grid.forEach行无效。如果您打开浏览器的开发人员控制台，您应该会看到它引发TypeError。如果您运行console.log(grid)，则会发现grid是HTMLCollection，而can't be iterated over using forEach。

您可以先使用grid将Array.from(grid)转换为数组，或使用[].forEach.call(grid, changeColor)

使用javascript更改网格框的颜色

2 个答案: