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

Question

我之前看到过有关尝试使用 classes 而不是 ids 的隐藏显示 JavaScript 的问题。但是，我还没有真正找到任何明确的答案。我需要使用 class 因为我有一个常见问题解答部分，我可以在其中输入问题并隐藏/显示答案。这是我使用 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>

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

Answer 1

您遗漏了 classes and IDs 之间的概念差异。 类 不是唯一的，因此在查询 class 时您将无法检索单个元素。你当然可以得到一个只有一个元素的列表，但它仍然是一个列表，因为你可能有多个具有相同 class 的元素。另一方面，ID 是唯一的，这就是为什么您可以 select 通过使用方法通过 ID 获取直接元素的原因。

通过 class 检索对象的正确 JavaScript 方法是 getElementsByClassName （请注意，通过 s 它将 return 一个 list 个元素，而不是您可能期望的单个结果）。

您必须解析 returned 列表以获取您想要的元素。

为了说明，您可以切换第一个 returned 元素的 display 属性，方法是：

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

你可以看到一个JS Fiddle 有一个简单的例子here。