使用類而不是ID在JavaScript中隱藏顯示

Question

我曾經遇到過有關嘗試使用類而不是ID進行JavaScript隱藏顯示的問題。 但是，我還沒有真正找到任何明確的答案。 我需要使用一個類，因為我有一個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

您缺少類和ID之間的概念差異。 類不是唯一的，因此查詢類時將無法檢索單個元素。 您當然可以得到一個包含單個元素的列表，但它仍將是一個列表，因為同一類可能包含多個元素。 另一方面，ID是唯一的，這就是為什么您可以使用一種通過ID來獲取直接元素的方法來選擇它的原因。

按其類檢索對象的正確JavaScript方法是getElementsByClassName （請注意，通過s ，它將返回元素列表 ，而不是您可能期望的單個結果）。

您必須解析返回的列表以獲得所需的元素。

只是為了說明，您可以執行以下操作來切換第一個返回的元素的display屬性：

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

您可以在此處看到帶有簡單示例的JS小提琴。