Question

我之前看到过有关尝试在JavaScript中使用类而不是ids进行隐藏显示的问题。但是，我还没有找到任何明确的答案。我需要使用一个类，因为我有一个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>

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

Answer 1

您错过了classes and IDs之间的概念差异。类不是唯一的，因此在查询类时您将无法检索单个元素。你肯定可以获得一个包含单个元素的列表，但它仍然是一个列表，因为你可能有多个具有相同类的元素。另一方面，ID是唯一的，这就是为什么你可以通过使用方法通过其ID来选择直接元素。

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

您必须解析返回的列表以获取所需的元素。

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

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

你可以看到一个JS小提琴，其中有一个简单的例子here。

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

1 个答案: