使用 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

...这让我决定删除所有 ID，只保留
class

您所显示的代码并不能做到这一点。如果您希望当前拥有的所有元素

id="newpost"

都可以通过按钮切换，请删除该ID（如您所说）并将其替换为一个类。然后您可以使用

getElementsByClassName

并循环结果：

function showhide() {
    for (const element of document.getElementsByClassName("newpost")) {
        element.classList.toggle("hidden"); 
    }
}

.hidden {
    display: none;
}

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

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

另一种方法是在包含所有这些的父元素上使用一个类（

body

，如果没有更接近它们的类），然后只需在该父元素上切换一个类：

function showhide() {
    document.body.classList.toggle("hide-newpost");
}

.hide-newpost .newpost {
    display: none;
}

<body class="hide-newpost">
<button id="button" type="button" onclick="showhide()">Click Me</button>

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

使用 getElementsByClassName 显示/隐藏所有类

问题描述投票：0回答：1

1个回答

最新问题

使用 getElementsByClassName 显示/隐藏所有类

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1