事件委托 - 元素样式问题 - Javascript

Question

有一个问题，我可以单击每个单独的元素，然后目标元素在被单击时返回，但是在应用样式时，它仅适用于第一个元素，而不适用于任何其他目标元素。

事件委托的工作原理如上所述

下面是一个单独的书面示例来尝试调试这个问题，但我很难过

giphyContainer.addEventListener('click', (e) => {
    console.log(e.target);

    if (e.target.classList.contains("giphyImg__Front1")) {
        console.log("clicked! 1")
        frontPanel.style.zIndex = -3;
        backPanel.style.zIndex = 3;
    }

    if (e.target.classList.contains("giphyImg__Front2")) {
        console.log("clicked! 2")
        frontPanel.style.zIndex = -3;
        backPanel.style.zIndex = 3;
    }

    if (e.target.classList.contains("giphyImg__Front3")) {
        console.log("clicked! 3")
        frontPanel.style.zIndex = -3;
        backPanel.style.zIndex = 3;
    }

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

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

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

<div class="giphyContainer">
    <div class="giphyImg">
        <img src="img1.png" alt="" class="giphyImg__Front giphyImg__Front1">
        <div class="giphyImg__Back giphyImg__Back1"></div>
    </div>
    <div class="giphyImg">
        <img src="img2.png" alt="" class="giphyImg__Front giphyImg__Front2">
        <div class="giphyImg__Back giphyImg__Back2"></div>
    </div>
    <div class="giphyImg">
        <img src="img3.png" alt="" class="giphyImg__Front giphyImg__Front3">
        <div class="giphyImg__Back giphyImg__Back3"></div>
    </div>
</div>

Answer 1

您正在使用frontPanel 和backPanel 的全局值，它们不会根据您单击的图像而改变。

您需要将frontPanel和backPanel设置为与被点击元素相同的DIV中的前后图像。

giphyContainer.addEventListener('click', (e) => {
  console.log(e.target);
  let frontPanel = e.target.closest("div.giphyImg").querySelector(".giphyImg__Front");
  let backPanel = e.target.closest("div").querySelector(".giphyImg__Back");
  
  if (e.target.classList.contains("giphyImg__Front1")) {
    console.log("clicked! 1")
    frontPanel.style.zIndex = -3;
    backPanel.style.zIndex = 3;
  }

  if (e.target.classList.contains("giphyImg__Front2")) {
    console.log("clicked! 2")
    frontPanel.style.zIndex = -3;
    backPanel.style.zIndex = 3;
  }

  if (e.target.classList.contains("giphyImg__Front3")) {
    console.log("clicked! 3")
    frontPanel.style.zIndex = -3;
    backPanel.style.zIndex = 3;
  }

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

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

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

Answer 2

简单地做

<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>

const giphyContainer = document.querySelector('.giphyContainer')


giphyContainer.onclick = ({target}) =>
  {
  if (!target.matches('.giphyImg__Back,.giphyImg__Front')) return
    
  let 
    parent  = target.closest('div.giphyImg')
  , isFront = target.matches('.giphyImg__Front')
    ;
  parent.querySelector('.giphyImg__Front').style.zIndex = isFront ? -3 : 3
  parent.querySelector('.giphyImg__Back').style.zIndex  = isFront ? 3 : -3
  }

但是做起来要简单得多：

const giphyContainer = document.querySelector('.giphyContainer')

giphyContainer.onclick = ({target}) =>
  {
  if (!target.matches('.giphyImg, .giphyImg > img')) return
    
  target.closest('div.giphyImg').classList.toggle('front')
  }

div.giphyImg { 
  display    : inline-block;
  margin     : 10px 5px;
  cursor     : pointer;
  background : teal;
  font-size  : 0;
  }
div.giphyImg > img       { visibility: hidden;  } 
div.giphyImg.front > img { visibility: visible; }

<div class="giphyContainer">
  <div class="giphyImg ">
    <img src="https://picsum.photos/id/1015/160/200" alt="" >
  </div>
  <div class="giphyImg front">
    <img src="https://picsum.photos/id/1019/160/200" alt="" >
  </div>
  <div class="giphyImg front">
    <img src="https://picsum.photos/id/1016/160/200" alt="" >
  </div>
</div>