JavaScript事件委托点击正常触发但样式仅首个元素生效问题求助

问题根因 #

你获取frontPanel和backPanel时使用了querySelector类的全局选择方法，这类方法只会返回DOM树中第一个匹配的元素。无论点击第几个卡片，最终修改样式的永远是第一个卡片的前后面板，因此只有第一个元素有响应。

优化方案 #

你原本的写法存在大量冗余判断，可以通过定位当前点击卡片的容器，仅修改当前卡片内的元素样式解决问题，同时可以大幅简化代码：

简化后的JS代码 #

giphyContainer.addEventListener('click', (e) => {
    // 定位当前点击元素所属的卡片容器
    const currentCard = e.target.closest('.giphyImg')
    // 点击位置不在卡片内直接终止逻辑
    if (!currentCard) return

    // 仅在当前卡片内查找前后面板
    const frontPanel = currentCard.querySelector('.giphyImg__Front')
    const backPanel = currentCard.querySelector('.giphyImg__Back')

    if (e.target.classList.contains("giphyImg__Front")) {
        frontPanel.style.zIndex = -3;
        backPanel.style.zIndex = 3;
    } else if (e.target.classList.contains("giphyImg__Back")) {
        frontPanel.style.zIndex = 3;
        backPanel.style.zIndex = -3;
    }
})

可同步简化HTML结构（非强制，可保留原有数字后缀类） #

<div class="giphyContainer">
    <div class="giphyImg">
        <img src="img1.png" alt="" class="giphyImg__Front">
        <div class="giphyImg__Back"></div>
    </div>
    <div class="giphyImg">
        <img src="img2.png" alt="" class="giphyImg__Front">
        <div class="giphyImg__Back"></div>
    </div>
    <div class="giphyImg">
        <img src="img3.png" alt="" class="giphyImg__Front">
        <div class="giphyImg__Back"></div>
    </div>
</div>

内容的提问来源于stack exchange，提问作者Myles