javascript - 使用切换关闭单独 div 上的所有其他事件类

Question

我在让切换以粒子方式工作时遇到了一个小问题，据我所知，它不能使用切换来完成，这就是为什么我写在这里是为了看看是否有人可以向我展示最好的方法。所以目前我有 3 个 div，它们都有 onclick 事件，每个都有一个切换 css 类。我想要实现的是，如果其他人处于事件状态，则单击其中一个时，他们会返回到上一个类。

function orgClick(clicked_id) {
  var id = (clicked_id);
  document.getElementById(id).classList.toggle('org_container_active');

}

.org_container {
  width: 20%;
  margin-left: 6.25%;
  margin-right: 6.25%;
  margin-top: 15px;
  border: 2px solid #e1dfe1;
  border-radius: 15px;
  display: inline-block;
}

.org_container_active {
  width: 20%;
  margin-left: 6.25%;
  margin-right: 6.25%;
  margin-top: 15px;
  border: 2px solid #2bbe43;
  border-radius: 15px;
  display: inline-block;
}

.org_name {
  background-color: #f5f0f5;
  border-bottom: 2px solid #e1dfe1;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  text-align: center;
  font-weight: bold;
  padding-top: 5px;
  padding-bottom: 5px;
}

.org_logo {
  padding-top: 10px;
  margin: auto;
  width: 100px;
}

.org_info {
  padding: 5px 10px 10px 5px;
}

<div class="org_container" id="org1" onclick="orgClick(this.id);">

  <div class="org_name">

    <p align="center">Org 1</p>

  </div>

  <div class="org_logo">

    <img src="http://server3.sulmaxcp.com/logo_unavailable.svg" width="100px" height="100px" ondragstart="return false;">

  </div>

  <div class="org_info">

    <p></p>

  </div>

</div>

<div class="org_container" id="org2" onclick="orgClick(this.id);">

  <div class="org_name">

    <p align="center">Org 2</p>

  </div>

  <div class="org_logo">

    <img src="http://server3.sulmaxcp.com/logo_unavailable.svg" width="100px" height="100px" ondragstart="return false;">

  </div>

  <div class="org_info">

    <p></p>

  </div>

</div>

<div class="org_container" id="org3" onclick="orgClick(this.id);">

  <div class="org_name">

    <p align="center">Org 3</p>

  </div>

  <div class="org_logo">

    <img src="http://server3.sulmaxcp.com/logo_unavailable.svg" width="100px" height="100px" class="noselect">

  </div>

  <div class="org_info">

    <p></p>

  </div>

</div>

Answer 1

document.querySelectorAll() 可让您搜索与 CSS 选择器匹配的所有元素。您可以使用它来停用所有事件容器:

for (let div of document.querySelectorAll('.org_container_active')) {
    div.classList.remove('org_container_active');
}