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

Hide show in JavaScript using classes instead of ids

本文关键字：JavaScript 隐藏 显示 id      更新时间：2023-09-26

我之前看到过关于在JavaScript中尝试使用类而不是id来隐藏显示的问题。然而，我还没有找到任何确切的答案。我需要使用一个类，因为我有一个常见问题部分，我在那里输入问题并隐藏/显示答案。这是我使用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以使用类？我尝试将getElementById更改为getElementByClassName，但我不知道为什么不起作用。

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

按类检索对象的正确JavaScript方法是getElementsByClassName（请注意，通过s，它将返回元素列表，而不是您可能预期的单个结果）。

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

为了便于说明，您可以通过执行以下操作来切换第一个返回元素的display属性：

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

您可以在这里看到一个带有简单示例的JS Fiddle。

相关文章：