嘗試使用按鈕切換類的可見性（使用Javascript），絕對沒有任何效果，我缺少了什么？

Question

我想建立一個頁面，其中頁面上某些元素的可見性通過按鈕切換，但是由於某種原因，我的代碼只是被忽略了/絕對不執行任何操作。

使用ID時，我可以使它工作，但是只有頁面上ID的第一個實例會更改，而其余的則被忽略。 在課堂上， 什么也沒有發生 。

我確定我在這里遺漏了一些基本知識，但我不知道是什么。 請檢查以下內容：

 function georgianInfo() { document.getElementByClassName("georgian").style.display = "block"; document.getElementByClassName("international").style.display = "none"; } function internationalInfo() { document.getElementByClassName("georgian").style.display = "none"; document.getElementByClassName("international").style.display = "block"; } 

 .georgian { display: none; } .international { display: block; } 

 <form><input type="button" onClick="georgianInfo()" value="georgian students"></form> <form><input type="button" onClick="internationalInfo()" value="international students"></form> <h4 class="margin-rmv">Admissions Information</h4> <h5 class="georgian">Georgian Students Admissions Information</h5> <h5 class="international">International Students Admissions Information</h5> 

請參閱Codepen： https ：//codepen.io/escapetomars/pen/vxBLgg

Answer 1

更改document.getElementsByClassName的拼寫。

同樣， document.getElementsByClassName返回一個數組/元素列表。 因此，您必須使用正確的索引來引用它。

參考代碼：

 function georgianInfo() { document.getElementsByClassName("georgian")[0].style.display = "block"; document.getElementsByClassName("international")[0].style.display = "none"; } function internationalInfo() { document.getElementsByClassName("georgian")[0].style.display = "none"; document.getElementsByClassName("international")[0].style.display = "block"; } 

 .georgian { display: none; } .international { display: block; } 

 <table class="tab-menu" cellspacing="0" cellpadding="0"> <tr> <td> <form><input type="button" onClick="georgianInfo()" value="for georgian students"></form> </td> <td> <form><input type="button" onClick="internationalInfo()" value="for international students"></form> </td> </tr> </table> <h4 class="margin-rmv">Admissions Information</h4> <h5 class="georgian">Georgian Students Admissions Information</h5> <h5 class="international">International Students Admissions Information</h5> 

我建議您閱讀有關Document.getElementsByClassName的MDN文章 ，以更好地理解該結構。

Answer 2

更改功能為：

    function georgianInfo() {
      document.getElementsByClassName("georgian")[0].style.display = "block";
      document.getElementsByClassName("international")[0].style.display = "none";
    }

    function internationalInfo() {
      document.getElementsByClassName("georgian")[0].style.display = "none";
      document.getElementsByClassName("international")[0].style.display = "block";
    }

Answer 3

正確的方法是document.getElementsByClassName，顧名思義，它返回一個項目數組。 因此，如果必須對這些元素應用任何內容，則需要遍歷該數組，然后對每個元素應用某些內容，或者可以使用數組索引選擇特定的元素。

var element = document.getElementsByClassName('class')[0]; // assuming you have at least one matching element.
element.style.display = 'none';

這是更新的代碼筆的鏈接

http://codepen.io/vibhanshu/pen/EWYNMb

Answer 4

getElementById和getElementsByClassName之間有一個非常重要的區別。 id是唯一的，並且id="abc"只有一個元素。 因此， getElementById('abc')獲取元素，您可以更改其樣式。 一些瀏覽器如果您重復輸入ID，則會獲得第一個瀏覽器。

但是getElementsByClassName是不同的。 可能有多個元素class="abc" 。 因此， getElementsByClassName為您提供了一個集合，並且您不能通過這種方式更改集合的樣式。 如另一個答案中所述，您需要從集合中選擇一個元素以更改其樣式。

document.getElementsByClassName("georgian")[0].style.display = "block";