javascript - .addEventListener - 长列表

Question

我在我的问题上找到了很少的答案，但可能我没有足够的经验来处理我的案例。

我有生成为 .html 的项目列表

<div id="grid">

通过 JavaScript

var div_block = "";
  for (i = 0; i < 70; i++) {
     div_block = div_block + '<div id="c' + i + '" class="card"></div>';
  }
document.getElementById("grid").innerHTML = div_block;

for (i = 0; i < 70; i++) {
  'var c' + i + ' = document.getElementById(c' + i + ');'
}

而且效果很好。我想选择 .addEventListner 方法来选择正确的元素，但对于 70 个及更多元素代码:

c0.addEventListener("click", function () {revealCard(0);});
c1.addEventListener("click", function () {revealCard(1);});
...
cn.addEventListener("click", function () {revealCard(n);});

很大而且不优雅。我尝试过的方法不起作用

for (i = 0; i < 70; i++) {
  'c'+i+'.addEventListener("click", function() { revealCard('+i+'); });'
}

如何为此构建有效的 addEventListener() ？非常感谢。

Answer 1

您所面临的问题可以通过使用您在每张卡片上添加的 card 类来解决。然后，要引用正确的卡片，您可以使用关键字 this，它在 addEventListener 的上下文中将引用接收到点击的任何 DOM 元素。您也不需要为每个 div 生成唯一的 Id，我认为这是一大优点。

您的代码将如下所示:

let div_block = "";

for (i = 0; i < 70; i++) {
  div_block = div_block + '<div class="card"></div>';
}

const cards = querySelectorAll(".card");

cards.forEach(card => {
  card.addEventListener("click", revealCard)
})

function revealCard(){
  // Here, `this` refers to the card that was clicked
  // So you can do what you want with it
  console.log(this);
}