我無法使用循環在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`;
}