如何从选定的 dom 兄弟姐妹中删除类？如何打开一个div并关闭所有其他div？我使用兄弟姐妹（）还是什么

Question

我有一个包含 3 列的网格，我想这样做，以便当我单击其中一个 div 时，它会向下一行并跨越整行，当我再次单击它时，它也会重新关闭。我让它发挥作用。但我想做到这一点，以便当我打开不同的 div 时，它会关闭所有其他打开的 div？所以一次只有一个打开？我该怎么做？

<div id="gridALBUM">
  <div id="one" onclick="toggles1()">   <h1>1</h1> <div><h2>one</h2></div> </div>
  <div id="two" onclick="toggles2()">   <h1>2</h1> <div><h2>two</h2></div> </div> 
  <div id="three" onclick="toggles3()"> <h1>3</h1> <div><h2>three</h2></div> </div>
  <div id="four" onclick="toggles4()">  <h1>4</h1> <div><h2>four</h2></div> </div>
  <div id="five" onclick="toggles5()">  <h1>5</h1> <div><h2>five</h2></div> </div>
  <div id="six" onclick="toggles6()">   <h1>6</h1> <div><h2>six</h2></div> </div>
  <div id="seven" onclick="toggles7()"> <h1>7</h1> <div><h2>seven</h2></div> </div>
  <div id="eight" onclick="toggles8()"> <h1>8</h1> <div><h2>eight</h2></div> </div>
  <div id="nine" onclick="toggles9()">  <h1>9</h1> <div><h2>nine</h2></div> </div>
  <div id="ten" onclick="toggles10()"> <h1>10</h1> <div><h2>ten</h2></div> </div>
</div>

另外，我在 h1 旁边有这些其他 div，其中包含信息，但我只想显示它的父 div 是否已扩展并跨越整行？所以我想只有在打开时才将显示从隐藏更改为阻止..我知道我必须添加或删除类 hidesINFO 但是，我是否必须为每个 div 创建一个函数才能做到这一点？

#gridALBUM {
  margin: 50px auto;
  max-width: 908px;
  display: grid;
  grid-gap: 0 4px;
  grid-template-columns: repeat(3, 300px);
  background-color: lightblue;
}

#gridALBUM > div {
  border: 1px solid black;
  display: flex;
}

.hidesINFO {
  display: none;
}

.span {
  grid-column: 1 / 4;
  background-color: blue;
}

另外，有没有更好的方法来执行下面的代码？而不是必须具有相同的确切代码但具有不同的 ID 来定位每个 div？因为我必须添加更多的 div，并且我不想复制和粘贴每个函数，因为它们实际上只做相同的事情，只是针对不同的元素

function toggles1() {
  document.getElementById("one").classList.toggle("span"); } 

function toggles2() {
  document.getElementById("two").classList.toggle("span"); } 

function toggles3() {
  document.getElementById("three").classList.toggle("span"); } 

function toggles4() {
  document.getElementById("four").classList.toggle("span"); } 

function toggles5() {
  document.getElementById("five").classList.toggle("span"); } 

function toggles6() {
  document.getElementById("six").classList.toggle("span"); } 

function toggles7() {
  document.getElementById("seven").classList.toggle("span"); } 

function toggles8() {
  document.getElementById("eight").classList.toggle("span"); } 

function toggles9() {
  document.getElementById("nine").classList.toggle("span"); } 

function toggles10() {
  document.getElementById("ten").classList.toggle("span"); } 

我是否使用siblings()来喜欢、删除选择器？这会起作用吗？

function toggles2() {
  document.getElementById("two").classList.toggle("span"); 
  document.getElementById("two").siblings().classList.remove("span");
  document.getElementById("two").siblings().child[1].classList.remove("hidesINFO");}

Answer 1

要访问兄弟姐妹，您可以转到

parentElement.children

，但这是代码中最少的问题。重复太多了。看看这个重构版本。

function toggleSpan(item) {
  var state = item.classList.contains("span")
  Array.from(item.parentElement.children).forEach(function(child) {
    child.classList.remove("span");
  })
  item.classList.toggle("span", !state);
}


document.querySelectorAll(".number").forEach(function(item) {
  item.addEventListener('click', function(ev) {

    var number = item.getAttribute("data-number")
    console.log("number pressed", number)

    toggleSpan(item)
  })
})

#gridALBUM {
  margin: 50px auto;
  max-width: 908px;
  display: grid;
  grid-gap: 0 4px;
  grid-template-columns: repeat(3, 300px);
  background-color: lightblue;
}

#gridALBUM>div {
  border: 1px solid black;
  display: flex;
}

.hidesINFO {
  display: none;
}

.span {
  grid-column: 1 / 4;
  background-color: blue;
}

<div id="gridALBUM">
  <div id="one" data-number="1" class="number">
    <h1>1</h1>
    <div>
      <h2>one</h2>
    </div>
  </div>
  <div id="two" data-number="2" class="number">
    <h1>2</h1>
    <div>
      <h2>two</h2>
    </div>
  </div>
  <div id="three" data-number="3" class="number">
    <h1>3</h1>
    <div>
      <h2>three</h2>
    </div>
  </div>
  <div id="four" data-number="4" class="number">
    <h1>4</h1>
    <div>
      <h2>four</h2>
    </div>
  </div>
  <div id="five" data-number="5" class="number">
    <h1>5</h1>
    <div>
      <h2>five</h2>
    </div>
  </div>
  <div id="six" data-number="6" class="number">
    <h1>6</h1>
    <div>
      <h2>six</h2>
    </div>
  </div>
  <div id="seven" data-number="7" class="number">
    <h1>7</h1>
    <div>
      <h2>seven</h2>
    </div>
  </div>
  <div id="eight" data-number="8" class="number">
    <h1>8</h1>
    <div>
      <h2>eight</h2>
    </div>
  </div>
  <div id="nine" data-number="9" class="number">
    <h1>9</h1>
    <div>
      <h2>nine</h2>
    </div>
  </div>
  <div id="ten" data-number="10" class="number">
    <h1>10</h1>
    <div>
      <h2>ten</h2>
    </div>
  </div>
</div>