循环的JavaScript未定义

Question

我想做几个正方形。当你按下其中一个时，方块就会消失。

var square = document.querySelectorAll(".square");
for (var i = 0; i < square.length; i++) {
square[i].addEventListener("click", function() {
square.style.display = "none";
})
}

.square {
background: red;
height: 100px;
width: 100px;
margin-top: 20px;
}

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

出于某种原因控制台显示"TypeError: square.style is undefined"。。。

Answer 1

否。仔细阅读错误消息：它说style是未定义的，而不是square。

square是getElementsByClassName的返回值：所有平方的集合。

如果要获取单击的元素，则需要使用this或event.currentTarget。

var square = document.querySelectorAll(".square");
for (var i = 0; i < square.length; i++) {
square[i].addEventListener("click", function(e) {
e.currentTarget.style.display = "none";
})
}

.square {
background: red;
height: 100px;
width: 100px;
margin-top: 20px;
}

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

---

警告：潜水元素并非设计为交互式元素。它们不会以选项卡顺序出现，也不会被屏幕阅读器宣布为交互式。如果你想让用户点击一些东西：请使用<button>。