当使用普通 JavaScript 单击父元素时，如何在特定子元素内切换类？

Question

单击父按钮时，会在其子元素内部切换一个类以显示或隐藏，单击该子元素时，它将显示加载动画几秒钟，并将子元素切换回其隐藏的原始状态。

我尝试添加遵循纯香草JS，但无法使其正常工作。我已经在单击父类时添加了显示类，但加载动画是我卡住的地方。

Answer 1

您可以使用如下 JavaScript，仅在单击父元素（而不是子元素）时切换 .child-1 元素上的 .show-white 类，为此我使用条件 (if(e.target!==e .当前目标）。

const parent = document.querySelector('.parent')
const childOne = document.querySelector('.child-1')
const childTwo = document.querySelector('.child-2')


parent.addEventListener('click',(e)=>{
    let target = e.currentTarget
    if(e.target!==e.currentTarget){
        return
    }
    childOne.classList.toggle('show-white')
})

.parent{
  display: flex;
  width: 100px;
  justify-content: space-evenly;
  height: 100px;
  background-color: red;
}

.child-1{
  width: 25px;
  height: 25px;
  background-color: blue;
}

.child-2{
  width: 25px;
  height: 25px;
  background-color: green;
}

.show-white{
  background-color: white;
}

<div class="parent">
  <div class="child-1"></div>
  <div class="child-2"></div>
</div>