JS如何定位被点击的div内的div

Question

这是一种特殊情况：更改被单击元素的 CSS 。

如果我有一些像这样的div：

    <div class="parent">
        <div class="child"></div>
    </div>

     <div class="parent">
        <div class="child"></div>
    </div>


    

我知道我可以为每个父 div 分配一个函数，例如：

const parent = document.querySelectorAll('.parent');
if(parent.length){
   for (let l of parent){
      l.addEventListener('click', (e)=>{
        l.classList.toggle('visible')
      })
   }
}

但是当单击父级时，如何切换子级 div 的 .visible 类？或者添加visibility:visible到子div样式。

非常感谢！

Answer 1

您可以继续使用

querySelector

，但这次从父元素开始搜索，而不是从文档开始搜索。

parent.addEventListener("click", (event) => {
  // `event.currentTarget` gives you element that event listener attached to.
  // it's not necessary, but I prefer to do this way.
  const child = event.currentTarget.querySelector(".child");
  // since `querySelector` can return `null`, it's never bad thing to check
  // using optional chaining is also a solution
  if (child === null) return;
  child.classList.toggle("visible");
});

一些建议 - 最好使用按钮作为交互元素，因为 div 没有任何语义，并且不会在辅助功能树中显示为交互元素。而且它不能用键盘激活。这会使某些用户无法访问您的元素。使用按钮只需要更改 HTML，并且会使其更加可用。

Answer 2

您可以为此使用 e.target，然后检查该目标是否包含 .child 类以切换所需的类。

const parent = document.querySelectorAll('.parent')
console.log(parent)

parent.forEach(div=>{
    div.addEventListener('click', (e) =>{
        let target = e.target
        console.log(target)
        if(e.target.matches('.child')){
            target.classList.toggle('changeBackground')
        }
    })
})

.parent{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height:  100px;
    border: 2px solid black;
}

.child{
    display: flex;
    width: 50px;
    height: 50px;
    border: 1px solid red;
}

.child.changeBackground{
    background-color: yellow;
}

    <div class="parent">
        <div class="child"></div>
    </div>

     <div class="parent">
        <div class="child"></div>
    </div>