时间戳

首页 > 解决方案 > 如何抓取多个 div 并使它们不可见？

javascript - 如何抓取多个 div 并使它们不可见？

问题描述

有人可以帮我解决以下问题吗？

我正在尝试创建一个包含一些隐藏内容的表格，并在有人单击其中一行时显示它们。我设法创建了它，但只有当我只想隐藏和显示 1 个元素时它才有效，但目标是隐藏和显示 5 个不同的元素（跨度）。

这是我的尝试，正如我所提到的，它是派对工作，但我错过了一些我认为明显的事情。

function hiddenTh() {
  var x = document.getElementById("hidden-th");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}
<section id="course-list">
  <div class="table-responsive">
    <table class="table table-hover course-list-table tablesorter">
      <!--tablesorter class removed-->
      <thead>
        <tr>
          <th class="header">Képzés</th>
          <th class="header">Óraszám</th>
          <th class="header">Helyszín</th>
          <th class="header">Képző</th>
          <th class="header">Kezdés, időpontok</th>
          <th class="header">Óradíj</th>
          <th class="header">Jelentkezés és információ</th>


        </tr>
      </thead>
      <tbody>
        <tr>
          <th class="course-title" onclick="hiddenTh()">Autogén tréning sajátélmény <br><span class="hidden-th" id="hidden-th">100 órás képzés részeként</span></th>
          <th class="course-category" onclick="hiddenTh()">30 óra</th>
          <th class="course-title" onclick="hiddenTh()">Budapest <br><span class="hidden-th" id="hidden-th">Szentkirályi u. 10.</span></th>
          <th class="course-category" onclick="hiddenTh()">Lipárdy Krisztina <br><span class="hidden-th" id="hidden-th"><a href="mailto:xy.xy@xy.com" target="_blank">xy.xy@xy.com</a></span></th>
          <th class="course-title" onclick="hiddenTh()">Kedzés: 2021. szeptember <br><span class="hidden-th" id="hidden-th">hétfőn 16 óra után hetente</span></th>
          <th class="course-category" onclick="hiddenTh()">2300 Ft /tanóra</th>
          <th class="course-title" onclick="hiddenTh()">BETELT A CSOPORT <br><span class="hidden-th" id="hidden-th">Előfeltétel: pszichológus végzettség és első interjú</span></th>
        </tr>

我已经尝试过使用 getElementsbyClassName 但它对我不起作用。我认为问题在于 var x 只能包含 1 个元素。我试图创建一个字符串，但我失败了。有人可以帮助找到正确的方向吗？提前致谢！

标签： javascripthtml

解决方案

如果要选择具有特定类名的所有元素，可以使用： document.querySelectorAll('.classname') 请注意初始点(.)，它是类的 CSS 选择器。所以在你的情况下，你可以这样做：

const elements = document.querySelectorAll('.hidden-th')
for(const x of elements){
    if (x.style.display === "block") {
       x.style.display = "none";
    } else {
       x.style.display = "block";
    }
}

推荐阅读