我无法使用循环在Javascript中创建交错过渡延迟

Question

我正在尝试为JavaScript中的HTML集合创建交错的过渡延迟，并且无法使用“ for”循环来做到这一点。 HTML集合存储在一个名为listItem的变量中。

这是我当前正在使用的代码，并且可以正常工作：

listItem[0].style.transitionDelay = "0s";
listItem[1].style.transitionDelay = "0.1s";
listItem[2].style.transitionDelay = "0.2s";
listItem[3].style.transitionDelay = "0.3s";

我正在尝试使用“ for”循环执行上述操作。我目前有这个，它不起作用：

for (i = 0; i < 4; i++) {
listItem[i].style.transitionDelay = "i*0.1s";
}

谁能解释我的“ for”循环出了什么问题？问题似乎在于“ i * 0.1s”值。预先谢谢你。

Answer 1

您需要在引号之外进行乘法运算，并将结果与​​"s"

连接

for (i = 0; i < 4; i++) {
   listItem[i].style.transitionDelay = i*0.1 + "s";
}

Answer 2

您需要将乘数设为数字，然后将其设为字符串。

您可以使用ES6进行字符串插值：

for (i = 0; i < 4; i++) {
  listItem[i].style.transitionDelay = `${i * 0.1}s`;
}