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

Question

我试图增加类的延迟时间。但似乎为不同项目添加时间不起作用。我在控制台上记录了delay，它显示0。我的for循环出了什么问题？为什么它不加时间或数字！并且我得到了Uncaught TypeError的错误：无法读取undefined的属性"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>

Answer 1

我们知道您是新手：(。但请你更好地提出你的问题。然后你会得到一个更好的答案。这里有许多才华横溢的工程师。

编辑

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

感谢您指定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}的使用。你可以在这里阅读。另一件事是注意forEach有自己的索引，我们可以使用。不需要使用额外的for循环。

Answer 2

好的，所以我使用了一个不同的名称作为变量，但这是我所做代码的一个片段(我删除了一些没有意义的东西，因为这个片段并不包括所有内容(

var timer;
var question;
var loader;
var modeSwitch;
var NUM_QUESTIONS;
var TIMEOUT = 10000;
function initApp(){
if(instructor()){
loader = document.querySelector("#loader")
loader.id="";
timer=setTimeout(load, 3500);
answer.addEventListener("onsubmit", validateAnswer, false);
}else{
document.write();

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