Question

我有几个嵌套的div，如下：

<div class="person" onClick="revealBio()">
    <div class="name">...some name</div>
    <div class="role">...some role</div>
    <div class="bio">...some bio</div>     
</div>

在我的CSS中，我隐藏了生物（就像手风琴一样）。当该人点击任何会员的信息时，我想展开以展示生物（通过改变css）。但是，我点击的目标太具体了。我希望它能够将单击的人员卡（＆＃34; person＆＃34; div）返回给我，但如果特别点击它们，它也只会返回给我名称和角色。

以下是我使用的香草javascript：

function revealBio(){
  document.addEventListener('click', function(e) {
    var revealThisBio = e.target;
    revealThisBio.classList.toggle('reveal-bio')
  })
}

我想让它回到我身边：

<div class="person" onClick="revealBio()">
  <div class="name">...some name</div>
  <div class="role">...some role</div>
  <div class="bio">...some bio</div>     
</div>

这样我就可以将一个类切换到显示生物信息的人类。有没有办法让我的目标不那么具体？

谢谢！

Answer 1

要解决有关如何选择所点击的.person的问题，请不要使用e.target，而是使用e.currentTarget或this。< / p>

更重要的是，每次点击.person时都不要绑定其他点击处理程序。 revealBio已经是一个事件处理程序，所以只需在那里进行必要的更改：

function revealBio() {
  this.classList.toggle('reveal-bio');
}

您至少尝试使用addEventListener，而不是添加onclick="...garbage..."，而是从JS绑定您的点击处理程序：

var people,
    person,
    i;

function revealBio() {
  this.classList.toggle('reveal-bio');
}

people = document.querySelectorAll('.person');
for (i = 0; i < people.length; i++) {
  person = people[i];
  person.addEventListener('click', revealBio);
}

如何使点击事件监听器不那么具体？

1 个答案: