javascript - 使用javascript更改网格框的颜色

Question

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

var grid = document.getElementsByClassName('box');

function changeColor(item) {
  item.addEventListener('click', function() {
    this.style.background = 'black';
  });
};

grid.forEach(function(el) {
  changeColor(el);
});

我觉得这需要“绑定(bind)”方法，但我还不知道绑定(bind)是如何工作的，所以有没有可能让它在没有绑定(bind)的情况下工作？谢谢。

Answer 1

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

注意:网格变量不是数组。它是一个类似数组的对象。为了能够对其使用 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>