数组JavaScript

我已开始制作记忆游戏，但我有一个问题：

let card = [];

function makeCards() {

  let cardSymbol = [];

  const scorePan = document.querySelector('section');

  scorePan.insertAdjacentHTML('afterend', '<ul class="deck"></ul>');

  const cardDeck = document.querySelector('.deck');


  for (let i = 1; i < 17; i++) {

    card[i] = document.createElement('li');

    card[i].setAttribute('class', 'card');

    cardSymbol[i] = document.createElement('i');

    cardSymbol[i].setAttribute('class', `fa fa-${symbols[i]}`);

    card[i].appendChild(cardSymbol[i]);

    cardDeck.appendChild(card[i]);
  }


}

makeCards();

let card=[]；
函数makeCards（）{
设cardSymbol=[]；
const scorePan=document.querySelector（'section'）；
scorePan.insertAdjacentHTML（'afterend'，'
）；
const cardDeck=document.querySelector（'.deck'）；
for（设i=1；i<17；i++）{
卡片[i]=document.createElement（'li'）；
卡片[i].setAttribute（'class'，'card'）；
cardSymbol[i]=document.createElement（'i'）；
cardSymbol[i].setAttribute（'class'，'fa-fa-${symbols[i]}`）；
卡片[i].appendChild（卡片符号[i]）；
cardDeck.appendChild（卡[i]）；
}
}
制作卡片（）；

在数组卡中，我存储了所有的卡，并在函数makeCards中添加了这些卡，问题是我想在另一个函数中为每个卡添加一个事件侦听器，但是如果我迭代元素

---

对于for循环和I console.log（），它显示给我的每个元素都未定义，这种情况要么发生在函数中，要么发生在任何函数之外，但如果我是console.log（card）；它向我显示了一个包含数组中所有元素的数组。既然我有一个数组，为什么我不能在它们上面循环？？或者，当我在函数makeCards中创建元素时，是否应该将EventListern添加到元素？

您需要一个实时事件侦听器。如果您使用的是jQuery，那么可以使用

---

或者，如果您使用的是原生js，您可以实现

我们可以将一个作为共同祖先的元素设置为所有卡片元素，以侦听在其和/或其后代上发生的

“单击”事件。这是可能的，因为事件是如何冒泡的。有关此过程的详细信息，请阅读这篇关于的文章

下面的演示创建了两个匹配的FA类数组，并将它们洗牌。祖先元素被创建为
deck
，其后代元素是
card
，以及
face
元素，它们是在
for
循环的每次迭代中创建的。每个
卡/面
只提供翻页的基本功能，匹配的逻辑超出了OP问题的范围，需要发布一个单独的问题

演示
详细信息将在演示中进行注释


/*符号数组中的硬编码FA类
==克隆符号数组
==在两个数组上使用shuffle（）函数
==将两个数组合并到面数组中
*/
var symbol=['fa-pied-piper-alt'、'fa-HERN'、'fa-star'、'fa-o'、'fa-paw'、'fa-leaf'、'fa-cube'、'fa-REFER'、'fa-empire'、'fa-PRIME'；
var match=symbol.slice（0）；
var topCut=洗牌（符号）；
var bottomCut=洗牌（匹配）；
变量面=上切。下切（下切）；
//创建并引用父元素
var stack=document.createElement（'main'）；
stack.id='deck'；
//对于每个循环。。。
for（设c=0；c0；i-=1）{
j=数学楼层（数学随机（）*（i+1））
温度=数组[i]
数组[i]=数组[j]
数组[j]=temp
}
返回数组；
}
#甲板{
显示器：flex；
柔性流：行换行；
宽度：450px；
高度：300px；
边界半径：6px；
边框：5px镶棕色；
背景：绿色；
}
.卡片{
文字装饰：无；
显示：内联块；
宽度：48px；
高度：64px；
边界半径：6px；
边框：3倍实心#000；
背景：#fff；
字体大小：40px；
文本对齐：居中；
保证金：5px
}
.脸{
transform:translateY（11px）；
指针事件：无；
颜色：继承；
}
.掩护{
颜色：透明；
背景：#fff；
}
您可以在尝试绑定事件列表器的地方共享函数吗？
原生js
与纯纯纯js一样，没有任何插件、工具或库。