在JavaScript中，使用forEach循环给元素添加类名的功能无法正常工作。

7 浏览
0 Comments

在JavaScript中，使用forEach循环给元素添加类名的功能无法正常工作。

我正在使用JavaScript的forEach方法循环遍历图片，并为每个图片添加一个动画类名。基本上，我希望图片一个接一个地以延迟的方式进行动画，但它一次性向元素添加了所有的类名，因此它们同时进行动画。我做错了什么？如何修复它？

const images = document.querySelectorAll(".image");
images.forEach((image, index) => {
  setTimeout(function () {
    image.classList.add("move-image-left");
    console.log(image);
  }, 100 * index);
});

0

1 答案

0 Comments

问题的原因是在forEach循环中添加类名的操作无法按预期工作。这是因为在使用setTimeout函数时，index * 1000的值可能不是预期的值。解决方法是使用箭头函数来确保setTimeout函数在每次迭代时都能正确地使用当前的index值。

具体的解决方法如下：

const images = document.querySelectorAll(".image");
images.forEach((image, index) => {
  setTimeout(() => {
    image.classList.add("move-image-left");
  }, index * 1000);
});

此外，还提供了相关的CSS和HTML代码用于完整的示例。CSS代码定义了.image类的样式，包括宽度、高度、过渡效果等。HTML代码中包含了几个带有.image类的div元素，每个div中都包含一个图片元素。

更多信息可以参考StackOverflow上的[这个答案](https://stackoverflow.com/questions/45498873)。

0