使用 JS 将两个父级的子元素连接/连接在一起

Question

我有两个独立的父元素，子元素如下：

<section>
    <div class="projects_name-container">
        <div class="projects_name">
            <a id="child1" href="">child1</a>
        </div>
        <div class="projects_name">
            <a id="child2" href="">child2</a>
        </div>
        <div class="projects_name">
            <a id="child3" href="">child3</a>
        </div>
        <div class="projects_name">
            <a id="child4" href="">child4</a>
        </div>
    </div>

    <div class="projects_image-container">
        <div class="image_wrapper">
            <div class="image_mask"><img alt="" src="/img/child1.jpg" /></div>
        </div>
        <div class="image_wrapper">
            <div class="image_mask"><img alt="" src="/img/child2.jpg" /></div>
        </div>
        <div class="image_wrapper">
            <div class="image_mask"><img alt="" src="/img/child3.jpg" /></div>
        </div>
        <div class="image_wrapper">
            <div class="image_mask"><img alt="" src="/img/child4.jpg" /></div>
        </div>
    </div>
</section>

const worksProjectNames = document.querySelectorAll('.projects_name');
const projectLinks = gsap.utils.toArray('.projects_name a');
const projectImageWrap = document.querySelectorAll('.image_wrapper');
const projectMask = document.querySelectorAll('.image_mask);
const projectImgInside = document.querySelectorAll('.image_mask img');

gsap.set(projectImageBox, { yPercent: -101 });
gsap.set(projectMask, { yPercent: 100 });
gsap.set(projectImgInside, { scale: 1.2 });

worksProjectNames.forEach((project, i) => {   
    
    let splitProjectNames = new SplitText(project, { type:"chars" }),
    projectTitle = splitProjectNames.chars;

    let tl = gsap.timeline({
        scrollTrigger: {
            trigger: '.works_pg',
            toggleActions: "play reset play reset"    
        }
    });

    tl.from(projectTitle, {
        delay: i * 0.4,
        duration: 1,
        autoAlpha: 0,
        y: 100,
        stagger: {
            amount: 0.3,
        },
        ease: 'power1.out'
    });
});


// Portfolio Hover
function initPortfolioHover() {
    projectLinks.forEach(link => {
        link.addEventListener('mouseenter', createPortfolioHover);
        link.addEventListener('mouseleave', createPortfolioHover);
    });
}
initPortfolioHover();

function createPortfolioHover(e){

    const allSiblings = projectLinks.filter(item => item !== e.target);
    const tl = gsap.timeline({ defaults: { duration: 1.2, ease: 'expo.inOut' } });

    if(e.type === 'mouseenter'){

        tl.to([projectMask, projectImageBox], { yPercent: 0 })
            .to(projectImgInside, { duration: 1.1, scale: 1 }, 0)
            .to(allSiblings, { opacity: 0.2, autoAlpha: 1 }, 0)
            .to(e.target, { opacity: 1, autoAlpha: 1 }, 0);

    } else if(e.type === 'mouseleave'){


        tl.to(projectMas, {yPercent: 100})
            .to(projectImageBox, { yPercent: -101 }, 0)
            .to(projectImgInside, { scale: 1.2 }, 0)
            .to(projectLinks, { opacity: 1, autoAlpha: 1 }, 0);

    }

    return tl;

}

我想将子元素“加入/链接”在一起，这样当我将鼠标悬停在“.projects_name”上时，我可以为“.image_wrapper”中的元素设置动画。我不确定在 JavaScript 中将它们“链接”在一起的正确方法，我知道如何做动画部分。 ID 不是永久的，我只是添加以帮助解释我如何尝试将它们链接在一起。我正在为我的动画使用 vanilla JavaScript 和 GSAP。

在没有视觉辅助的情况下解释事情我很糟糕，这是一个实时站点https://www.rudolfson.com/ 如果您将文本悬停，然后图像会显示，文本和图像位于单独的父容器中。

Answer 1

正如@PedroEstrada 正确指出的那样，元素 ID 应该是唯一的。所以你需要解决这个问题。

您可以通过多种方式将名称字段链接到图像字段。

1. 使用相关命名：如果名称字段 ID 类似于“[field1]name”，您可以让图像字段使用类似“[field1]class”的 ID/类
2. 在您的名称字段中添加一个属性，指示在悬停时应该对哪些 id/类进行动画处理，例如（我正在“借用”标签中的“for”属性，但您可以使用其他东西，例如“data”）李>
3. 您可以通过索引执行此操作。找出名称 div 中的索引，然后通过图像 div 中的该索引进行链接。