为什么 for 循环没有为代码添加数字？

如何解决为什么 for 循环没有为代码添加数字？

我试图增加课程的延迟时间。但似乎为不同项目添加时间不起作用。我的控制台记录了 delay 并且显示为 0。我的 for 循环有什么问题？为什么它不添加时间或数字！ 我收到了 Uncaught TypeError 的错误：无法读取未定义的属性 'setProperty'”。但我已经在我的代码中定义了它：见。

//service list add class
let serviceSection = document.querySelector(".service_section");
let serviceList = document.querySelectorAll(".service-list li");

serviceSection.addEventListener("mouseenter",addAnimation);
function addAnimation() {
  serviceList.forEach((currentItem) => {
    currentItem.classList.add("animate__animated","animate__fadeInLeft");
  });
  addDelay();
}

//service list animation delay

function addDelay() {
  let time = 0;
  for (let i = 0; i < serviceList.length; i++) {
    let delayInTime = time + i;
    let currentElement = serviceList[i];
    console.log(currentElement);
    serviceList[i].style.setProperty("--animate-delay",delayInTime + "s");
  }
  serviceList.style.setProperty("--animate-duration","1s");
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet"/>
<div class="service_section">
<ul class="service-list">
      <li>fjfdkkdkauejfdk dsskkfks </li>
      <li>fjfdkkdkauejfdk dsskkfks </li>
      <li>fjfdkkdkauejfdk dsskkfks </li>
      <li>fjfdkkdkauejfdk dsskkfks </li>
      <li>fjfdkkdkauejfdk dsskkfks </li>
      <li>fjfdkkdkauejfdk dsskkfks </li>
    </ul>
</div>

解决方法

我们知道您是新来的 :)。但是请更好地提出您的问题。然后你会得到更好的答案。这里有很多才华横溢的工程师。

编辑

-------------------------------------------- -------------------

感谢您指定 animate.css。它有很大帮助:) 这就是你要找的吗？我认为你让它变得比它需要的更复杂。我们只是为每个类添加一个类，并给它 1 秒的延迟。

//service list add class
let serviceSection = document.querySelector(".service_section");
let serviceList = document.querySelectorAll(".service-list li");

serviceSection.addEventListener("mouseenter",addAnimation,{once: true});
function addAnimation() {
  serviceList.forEach((currentItem,idx) => {
    let animateTime = `animate__delay-${idx}s`;
    currentItem.classList.add("animate__animated","animate__fadeInLeft",animateTime);
  });
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet"/>
<div class="service_section">
<ul class="service-list">
      <li>fjfdkkdkauejfdk dsskkfks </li>
      <li>fjfdkkdkauejfdk dsskkfks </li>
      <li>fjfdkkdkauejfdk dsskkfks </li>
      <li>fjfdkkdkauejfdk dsskkfks </li>
      <li>fjfdkkdkauejfdk dsskkfks </li>
      <li>fjfdkkdkauejfdk dsskkfks </li>
    </ul>
</div>

需要注意的几点，注意 {once: true} 的使用。你可以阅读它here。另一件事是注意 forEach 有我们可以使用的自己的索引。无需使用额外的 for 循环。

,

好的，所以我使用了不同的名称作为我的变量，但这是我所做的代码片段（我删除了一些没有意义的东西，因为片段不包含所有内容）我确保显示变量声明、事件侦听器以及输入在正常情况下等于输入整数值的内容：

await

对于此代码，3500 表示超时：等于 3.5 秒