在javascript中显示元素onclick并隐藏所有其他元素

我试图制作一个div（一个bio描述）来打开一个图像的点击，除了显示bio之外，代码工作得很好，但是当我点击其他图像时，它并没有关闭其他bios。我如何才能使它工作，使每次我点击不同的图像，它只显示生物相关的？我只想使用JavaScript

const teamMember = document.getElementsByClassName("team-member");
const teamMemberInfo = document.getElementsByClassName("team-member-info");
for (let i = 0; i < teamMember.length; i++) {
teamMember[i].addEventListener("click", function() {
  
  if (teamMemberInfo[i].style.display === "block") {
    teamMemberInfo[i].style.display = "none";
   
  } else {
    teamMemberInfo[i].style.display = "block";
  }
  
});
}

HTML代码：HTML是wordpress中使用的php代码的一部分，所以我只是写下了一般的想法

<div class="team-member">
<img src="someImg.jpg">
</div>

<div class="team-member">
<img src="someOtherImg.jpg">
</div>

<div class="team-member-info">
<div>Some text</div>
</div>

<div class="team-member-info">
<div>Some other text</div>
</div>

一些文本
其他一些文本

您迭代团队成员以添加事件侦听器，但您的事件侦听器需要一个单独的函数来迭代团队成员

也许是这样的：

const teamMember=document.getElementsByClassName（“团队成员”）；
const teamMemberInfo=document.getElementsByClassName（“团队成员信息”）；
const processTeamMembers=（j）=>{
for（设i=0；i

添加一个函数

function hideAllOthers(currentElem) {
   for (let i = 0; i < teamMember.length; i++) {
      if (teamMember[i] == currentElem) continue;
   
      teamMemberInfo[i].style.display = "none";
   }
}

---

此时，您正在根据元素的可见性属性切换

团队成员信息的可见性。这将通过单击其相关的
团队成员
元素使单个元素可见，如果再次单击则不可见

您可以做的是单击“首先使所有成员信息不可见，然后仅使一个元素可见”

下面是一个例子：


const teamMember=document.getElementsByClassName（“团队成员”）；
const teamMemberInfo=document.getElementsByClassName（“团队成员信息”）；
for（设i=0；i

。团队成员信息{
显示：无；
}

一些文本
其他一些文本
>P>所以，我认为你可能想考虑某种键或数据AtTrand ID来将图像绑定到内容部分，这样你就确信你将正确的图像绑定到正确的内容。这也将使javascript变得更简单、更清晰

然而，这回答了一个你没有问的问题。要使用您给出的代码回答问题，请确保图像顺序和描述顺序相同。如果不这样做，这种方法会很快失败，因为它需要节点的索引相同

现在，将您的js更改为：

const teamMember=document.getElementsByClassName（“团队成员”）；
const teamMemberInfo=document.getElementsByClassName（“团队成员信息”）；
for（设i=0；i
您能澄清什么不起作用吗？您是否看到任何错误？没有错误，不起作用的是，当单击一个团队成员时，仅再次单击它将隐藏团队成员信息（bio），我希望在单击其他团队成员时也将其隐藏。一般来说，我想一次显示一个团队成员的信息，而不是所有单击的信息。我希望它更清晰一点，请用你的代码做一个片段。谢谢你，它很有效！只有通过单击与之相关的图像来隐藏当前显示的团队成员信息才有问题。现在它显示了其中一个信息，但没有完全隐藏它的能力。你知道怎么解决这个问题吗？对不起，我要回去了。签出用户的答案更新。似乎正是你所要求的。：）非常感谢。这真的回答了问题，刚才我点击显示信息的同一张图片，不会在再次点击这张图片时隐藏它。你知道怎么解决吗？没问题，米莉-很高兴我能帮上忙！我刚刚更新了我的答案。非常感谢你的帮助！工作完美。
const teamMember = document.getElementsByClassName("team-member");
const teamMemberInfo = document.getElementsByClassName("team-member-info");

const processTeamMembers = (j) => {
    for (let i = 0; i < teamMember.length; i++) {
    if (i !== j) {
      teamMemberInfo[i].style.display = "none";
    } else {
      teamMemberInfo[i].style.display = "block";
    }
  }
}

for (let i = 0; i < teamMember.length; i++) {
    teamMember[i].addEventListener("click", function() {
        processTeamMembers(i);
    });
}

function hideAllOthers(currentElem) {
   for (let i = 0; i < teamMember.length; i++) {
      if (teamMember[i] == currentElem) continue;
   
      teamMemberInfo[i].style.display = "none";
   }
}

    teamMember[i].addEventListener("click", function() {
    **hideAllOthers(teamMember[i]);**

  if (teamMemberInfo[i].style.display === "block") {
    teamMemberInfo[i].style.display = "none";
   
  } else {
    teamMemberInfo[i].style.display = "block";
  }
  
});