Question

我有以下html：

<div id="container" class="container">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>

和css：

#container{
  border: 1px solid #000;
}

.square{
  width: 150px;
  height: 150px;
  background: #ccc;
  display: inline-block;
  margin: 5px;
}

.square:hover{
  cursor: pointer;
}

.square--green{
  background: green;
}

每个square都有一个点击处理程序。此处理程序通过添加square css类使点击的square--green绿色。 2秒后，正方形恢复它的原始颜色（通过{j}中的square--green在2秒内移除setTimeout类。 JS是：

var container = document.getElementById('container');
var children = container.children;

[].map.call(children, function(elem) {
  elem.addEventListener('click', function(){
    this.classList.add('square--green');
    var that = this;
    setTimeout(function(){
      that.classList.remove('square--green');
    }, 2000)
  })
});

我想要做的是允许一次不超过两个绿色方块。因此，如果container中有两个绿色方块，则不得调用其余方块的处理程序。两个绿色方块都获得原始颜色后，所有处理程序都应该再次工作怎么实现这个？我需要纯粹的js实现。
也许我在所有方块中设置处理程序的方式是错误的？钢笔：https://codepen.io/t411tocreate/pen/mqvGyJ

javascript - 限制活动处理程序数量

0 个答案: