所以我試圖讓多個導航鏈接從左到右移動，每個鏈接都有延遲，我在谷歌搜索后找到了一個解決方案，但是有人可以解釋為什么我的原始代碼片段不起作用嗎？
所以這是有效的代碼片段：
const openNav = document.querySelector(".open-nav");
const navigationLinks = document.querySelectorAll(".navigation-links");
openNav.addEventListener("click", () => {
for (let i = 0; i < navigationLinks.length; i ) {
setTimeout(function () {
navigationLinks[i].classList.toggle("-translate-x-0");
}, 100 * i);
}
});
但是這個沒有：
const openNav = document.querySelector(".open-nav");
const navigationLinks = document.querySelectorAll(".navigation-links");
openNav.addEventListener("click", () => {
navigationLinks.forEach((element) => {
setTimeout(function () {
element.classList.toggle("-translate-x-full");
}, 1000);
});
});
這是html
<nav class="flex flex-col items-center">
<button class="open-nav mt-4 ">
<span class=" flex rounded-md border-2 border-white">
<span class="self-center text-white p-1 uppercase">Move Links</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" class="w-10 h-10 stroke-white">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</span>
</button>
<ul class="nav flex flex-col">
<li class="navigation-links -translate-x-full transition-all">
<a class="text-lg inline-block bg-orange-100 border-2 border-black rounded-md p-2 my-1" href="">Link 1</a>
</li>
<li class="navigation-links -translate-x-full transition-all">
<a class="text-lg inline-block bg-orange-100 border-2 border-black rounded-md p-2 my-1" href="">Link 2</a>
</li>
<li class="navigation-links -translate-x-full transition-all">
<a class="text-lg inline-block bg-orange-100 border-2 border-black rounded-md p-2 my-1" href="">Link 3</a>
</li>
<li class="navigation-links -translate-x-full transition-all">
<a class="text-lg inline-block bg-orange-100 border-2 border-black rounded-md p-2 my-1" href="">Link 4</a>
</li>
<li class="navigation-links -translate-x-full transition-all">
<a class="text-lg inline-block bg-orange-100 border-2 border-black rounded-md p-2 my-1" href="">Etc</a>
</li>
</ul>
這是一個 jsbin：https ://jsbin.com/sanesozaje/edit?html,css,js,output
抱歉，如果沒有很好地解釋，英語不是我的第一語言
uj5u.com熱心網友回復：
由于 setTimeout 延遲，它不起作用。
您遍歷了所有專案，然后在 1000 毫秒后為每個元素添加了一個切換類。換句話說。在函式運行 1000mx 后，每個專案都會獲得切換類（這將同時發生）。
另一方面，在您看到100 * i的 setTimeout 的作業代碼片段上。這意味著第一項超時100ms，第二項超時200ms，第三項超時300ms，...
因此，您可以通過將這些缺失的詳細資訊添加到代碼中來修復原始代碼段，例如：
openNav.addEventListener("click", () => {
navigationLinks.forEach((element, i) => {
setTimeout(function () {
element.classList.toggle("-translate-x-full");
}, 100 * i);
});
});
- 在第 2 行添加了
, i - 為 setTimeout 延遲添加了 `* i)。
通過這些更改，您的代碼還將為每個專案添加不同的超時延遲
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/512273.html