JS：通过 getElementsByClassName 隐藏某些元素答案

【问题标题】：JS: Making certain elements hidden via getElementsByClassNameJS：通过 getElementsByClassName 隐藏某些元素
【发布时间】：2012-11-13 19:58:20
【问题描述】：

我正在尝试设置一个脚本，该脚本使用特定的类名设置不可见的所有内容。这是我要调用的示例：

<script type="text/javascript">
function hideItems(){
        document.getElementsByClassName('class1').style.visibility = "hidden";      
}
</script>

类名在表格的维度上，类似于这个例子：

<table onclick="hideItems()" width="200" border="1">
  <tr>
    <td class="class1">1</td>
    <td class="class2">2</td>
    <td class="class3">3</td>
    <td class="class1">1</td>
    <td class="class2">2</td>
    <td class="class3">3</td>
  </tr>
  <tr>
    <td class="class3">3</td>
    <td class="class1">1</td>
    <td class="class2">2</td>
    <td class="class3">3</td>
    <td class="class1">1</td>
    <td class="class2">2</td>
  </tr>
</table>

最后，将出现三个复选框，显示基于三个复选框中的哪一个被选中的尺寸。那部分，我可以做得很好，但将特定维度称为不可见是我目前遇到的问题。

提前感谢您的任何帮助。

【问题讨论】：

$('.class1').hide(); 只是说:P

标签： javascript hidden invisible getelementsbyclassname

【解决方案1】：

getElementsByClassName 返回一个集合。除非您使用像 jquery 这样的框架，否则您不能集体设置属性。

var elems = document.getElementsByClassName('class1');

for(var i = 0; i != elems.length; ++i)
{
elems[i].style.visibility = "hidden"; // hidden has to be a string
}

【讨论】：