主页 / 问题 / 1188187
Accepted
Logos
Asked:2020-10-09 23:05:10 +0000 UTC2020-10-09 23:05:10 +0000 UTC

单击父元素时更改子元素的类

  • 772

有一个由具有名称的元素组成的列表，当您单击任何元素时，它会移动到给定点并增加大小，然后信息会出现在其中。

对于实现，我在 JS 中使用委托，一切正常，但只有 1 个元素。其他元素上不显示任何信息，因为该类仅在具有 info 类的第一个子元素上发生更改。

（成员活动类负责与成员类一起移动和调整元素大小）

无论我多么努力，我都无法做到，当单击具有成员类的任何元素时，其子元素会将类信息更改为信息活动。

如何才能做到这一点？（最好没有jQuery）

members.addEventListener('click', function(event) {
  if (event.target.matches('.member')) {
    event.target.classList.toggle('member-active');
    info.classList.toggle('info-active');
    info.classList.toggle('info');
  }
});
<div class="members">

  <div class="member left-member-1">
    <p class="name">Имя</p>
    <p class="info">Информация</p>
  </div>

  <div class="member left-member-2">
    <p class="name">Имя</p>
    <p class="info info-left-2">Информация</p>
  </div>
  
</div>

javascript

1 个回答

  1. Best Answer
    members.addEventListener('click', function(event) {
  if (event.target.matches('.member')) {
    event.target.classList.toggle('member-active');
    var info = event.target.querySelector('.info'); // !!!
    info.classList.toggle('info-active');
    //info.classList.toggle('info');
  }
});
    • 1

相关问题