使用类而不是ID在JavaScript中隐藏显示

我已经看到了以前关于在JavaScript中使用类而不是ID来隐藏显示的问题。然而，我还没有找到任何明确的答案。我需要使用一个类，因为我有一个FAQ部分，在那里我输入问题并隐藏/显示答案。以下是我使用ID的代码：

<script type="text/javascript">
    function toggle() {
        var ele = document.getElementById("toggleText");
        var text = document.getElementById("displayText");
        if(ele.style.display == "block") {
                ele.style.display = "none";
            text.innerHTML = text() + " show";
        }
        else {
            ele.style.display = "block";
            text.innerHTML = text() + " hide";
        }
    } 
</script>

函数切换（）{
var ele=document.getElementById（“toggleText”）；
var text=document.getElementById（“displayText”）；
如果（ele.style.display==“块”）{
ele.style.display=“无”；
text.innerHTML=text（）+“显示”；
}
否则{
ele.style.display=“块”；
text.innerHTML=text（）+“隐藏”；
}
} 

---

如何更改此JavaScript以使用类？我尝试将getElementById更改为getElementByClassName，但我不知道为什么这样做不起作用。

您缺少这两者之间的概念差异。类不是唯一的，因此在查询类时无法检索单个元素。您当然可以得到一个包含单个元素的列表，但它仍然是一个列表，因为您可能有多个元素包含同一个类。另一方面，ID是唯一的，这就是为什么您可以通过使用方法来选择直接元素，以通过其ID获取它

按类检索对象的正确JavaScript方法是

getElementsByClassName

（请注意，

s

将返回元素的列表，而不是您可能期望的单一结果）

您必须解析返回的列表才能获得所需的元素

仅举个例子，您可以通过执行以下操作来切换第一个返回元素的

display

属性：

var displayedTexts = document.getElementsByClassName("displayText");
displayedTexts[0].style.display = "none";

---

您可以看到一个简单的JS Fiddle示例。

如果它对您有所帮助，请向上投票和/或选择作为接受的答案。谢谢！=）