我無法遍歷 2 個陣列來更改我的 gsap 時間線。
const subTabs = Array.from(document.querySelectorAll(".subtab"));
const expandTabs = Array.from(document.querySelectorAll(".expandtab"));
const tl = gsap.timeline({ defaults: { duration: 1, yoyo: true, } });
tl.set(expandTabs, {
visibility: "hidden",
opacity: 0,
scale: 0,
});
我需要對應的索引值，例如，如果 subTabs[0] 是“滑鼠懸停”，則 expandTabs[0] 需要應用新的影片。反之亦然，“mouseout”。我在這里做錯了什么？
subTabs.forEach((subTab, index) => {
const expandTab = expandTabs[index];
console.log(subTab, expandTab);
// Event Listener Hover on
subTab.addEventListener("mouseover", (event) => {
console.log("you clicked region number " index);
tl.to(expandTab[index], {
visibility: "visible",
opacity: 1,
scale: 1,
});
});
// Event Listener Hover off
subTab.addEventListener("mouseover", (event) => {
console.log("you exited region number " index);
tl.to(expandTab[index], {
visibility: "hidden",
opacity: 0,
scale: 0,
});
});
});
uj5u.com熱心網友回復：
也許你的第二個聽眾應該是mouseout而不是另一個mouseover。
subTab.addEventListener("mouseout", (event) => {
關于索引問題，為什么不使用 generateid來檢索元素呢？
照原樣，您在這里的線路可能會更好地作業：
tl.to(expandTab, {
visibility: "visible",
opacity: 1,
scale: 1,
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/421507.html
標籤：
上一篇：TypeScript問題物件陣列