试图切换带有按钮的类的可见性(使用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的Document.getElementsByClassName。

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