在使用 JS 动态创建卡片而不是在 HTML 中对其进行硬编码后，点击翻转卡片停止工作

Question

我在我的作品集中以活页卡的形式展示我的项目。最初，项目数据是在我的 index.html 中硬编码的，卡片在大屏幕上悬停时翻转，在小屏幕上单击时翻转。

我决定将所有硬编码数据移动到我的 script.js 中的一个对象，以便为该对象中的每个项目动态创建一个活页夹。这里没问题。 （除此之外，我还为卡片添加了一个加载背景动画，这样它们只会在几秒钟后显示它们的内容。这里也没有问题。）

但是，现在我正在使用 JS 创建 DOM 的翻转卡片，附加到卡片的事件侦听器无法像以前那样工作。将卡片记录到控制台确实会显示所有已创建的 div 的完整节点列表，但是在较小的屏幕上单击卡片时没有任何反应。

我觉得这是一个范围问题，但我不确定。我试过放置事件侦听器函数：

• 在 createProjectCard(projects) 中，在创建并附加翻页卡片之后：没有响应或抛出错误，但节点列表确实包含所有已创建的卡片
• 在 createProjectCard(projects) 内部，就在 setTimeout() 函数之后：没有响应或抛出错误，但节点列表确实包含所有已创建的卡片
• inside createProjectCard(projects) and inside the setTimeout() function (at its bottom)：这里发生了一些奇怪的事情，只有索引为奇数的卡片可以在点击时翻转；另外，如果我 console.log('clicked') 测试事件侦听器，所有卡片都会记录 'clicked' 而不仅仅是我点击的那个。
• 在 createProjectCard(projects) 之外：没有响应或抛出错误，但节点列表确实包含所有已创建的卡片

我想知道这个问题是否来自 projects.forEach 中的嵌套 innerFlipCards.forEach，但我不知道如何访问 innerFlipCards，因为它们是在 [=] 中创建的19=].

具有硬编码项目数据的旧代码，但活动卡片可在移动设备上使用：https://codepen.io/awelie_go/pen/KKXPQBJ

包含动态项目数据的新代码，但活动卡片在移动设备上不起作用：https://codepen.io/awelie_go/pen/OJxLQvQ

如果有人对如何解决此问题有任何提示，我很乐意听到。 感谢您的宝贵时间

Answer 1

似乎在非工作代码中有几个问题。
由于循环内的 setTimeout，卡片不会立即创建，但是
const innerFlipCards = document.querySelectorAll(".flip-card-inner");
尝试获取它们的列表并循环遍历它们，但是，由于还没有卡片，结果是空的。

但是，如果我们删除超时，则会出现另一个问题。上面提到的同一行代码（后面是对结果的循环），在每次循环迭代时执行。
这意味着，如果您有 3 张卡片，您的第一张卡片将有 3 个点击事件处理程序，您的第二张卡片将有 2 个，而第三张卡片只有 1 个。这解释了为什么只有奇数卡片有效。这类似于用户快速点击第 1 张卡片 3 次。

那么我们应该如何补救呢？更直接的解决方法是使用 createElement 创建 flip-card-inner div，将事件侦听器添加到其中并将其附加到 flip-card。这样您就可以在创建时设置所有内容，而不必稍后查询您的卡片并担心时间安排。