遍历 javascript 中的 2 个数组 (gsap)

Question

我在迭代 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,
        });
    });
});

Answer 1

也许您的第二个监听器应该是 mouseout 而不是另一个 mouseover。

subTab.addEventListener("mouseout", (event) => {

关于索引问题，为什么不使用生成的 id 来检索元素？

照原样，您的线路可能会更好：

tl.to(expandTab, {
            visibility: "visible",
            opacity: 1,
            scale: 1,
        });

遍历 javascript 中的 2 个数组 (gsap)

Iterating through 2 arrays in javascript (gsap)

javascript

arrays

loops

gsap