使用所有类的 getElementsByClassName 显示/隐藏文本

Question

我正在尝试显示/隐藏同一类的文本。我尝试了以下仅隐藏第一个 id

getElementById

的代码，这让我决定删除所有

IDs

并只保留

class

。

要隐藏的文本/单词位于页面中的不同位置（所以我不能只在其周围添加整个

div

，因为我想保持其他文本始终可见）。

我想用

getElementsByClassName

代替，但我似乎无法让它工作。

function showhide() {
   var div = document.getElementById("newpost");
   div.classList.toggle('hidden'); 
}

.hidden{
    display : none;
}

<button id="button" onclick="showhide()">Click Me</button>
<span id="newpost" class="hidden"><p>text 1</p></span>
<span id="newpost" class="hidden">text 2</span>
<span id="newpost" class="hidden"><p>text 3</p></span>

Answer 1

如果您尝试使用 getElementsByClassName 执行此操作，问题是如果您访问具有类名的元素并第一次切换该类，它将删除该类，并且当您再次单击时，您不应该访问该类。 可能的解决方案是两个创建两个类名 .hidden 和 .visible 并添加各自的类 onclick 事件，否则您也可以通过直接访问 span 标签来完成

.hidden {
   display: none;
        }

<button id="button" onclick="showhide()">Click Me</button>

  <span class="hidden"><p>text 1</p></span>
  <span class="hidden">text 2</span>
  <span class="hidden"><p>text 3</p></span>

function showhide() {
   var spans = document.querySelectorAll("span");
   spans.forEach(function (span) {
   span.classList.toggle("hidden");
  });
 }