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

Question

我将我的项目作为我的投资组合中的翻牌展示。最初，项目数据被硬编码在我的 index.html 中，卡片在悬停在大屏幕上和点击小屏幕时翻转。

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

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

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

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

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

带有硬编码项目数据的旧代码，但翻转卡可在移动设备上使用：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 个。这就解释了为什么只有奇数卡片有效。这类似于用户快速点击第一张卡片 3 次。

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