Javascript：基本的显示隐藏功能

我刚刚开始学习Javascript；然而，我确实有使用C语言家族编程的经验

我基本上是想了解getElementById函数族是如何工作的。为此，我尝试创建一个基本的显示/隐藏面板

<div>
   <div id="box1">
      Title 
      <span class="time">Time</span>
      <span class="else" style="display:none;">Something Else</span>
      <a class="icon" href="#" OnClick="javascript:toggle('box1');">[-]</a>
      <div class="content">Content</div>
   </div>
</div>

它目前只显示和隐藏box1 div，这是所有代码应该做的事情。以下是我希望能够做到的：

我希望能够将点击时的[+]切换到[-]，反之亦然。 我希望能够隐藏div.content 我希望能够切换的跨度从时间可见的另一个，反之亦然。 我可以考虑如何在伪代码中实现这一点，但我对javascript了解不够

OnClick(string divId)
{
   if (divId.Hide)
   { 
      divId.span.else.display = block;
      divId.span.time.display = none;

      divId.a.icon.text = "[+]";

      divId.div.content.display = none;
   }
   else //Show
   {
      divId.span.else.display = none;
      divId.span.time.display = block;

      divId.a.icon.text = "[-]";

      divId.div.content.display = block;
   }
}

我想我被困的部分是在id=box1 div中选择类的地方。我不知道如何通过类名进行交互。我在google上找到了一些关于如何实现getElementByClass的东西，因为JS没有，但这是我无法理解的

---

任何帮助都将不胜感激。

最新浏览器支持document.getElementsByClassName。IE8没有。大多数JavaScript库确实提供了一种按类选择元素的简单方法，但它们各有优缺点

如果您不想使用JavaScript库，这很好；不使用其他库有很多原因。您可以这样做：

elems = document.getElementsByTagName("h2");

for ( i=0; i<elems.length; i++ )
{
if ( elems[i].className == "myAwesomeClass" )
   { //  Do whatever stuff needs to happen to the class
     elems[i].style.color="red"; 
     }
}

---

在上面的代码中，我假设具有所需类的每个元素都有相同的标记。如有必要，您可以使用document.getElementsByTagName*选择所有标记，但浏览器可能需要更长的时间来处理这些标记。

不必唠叨，但使用jquery类型库可以轻松得多。在纯js中使用DOM有点麻烦。旁白：事件处理程序属性不使用javascript:前缀；实际上，您正在定义一个名为“javascript”的C风格标签。从来没有人在JS中使用标签。你会对JavaScript：URL感到困惑，也不应该使用它。总之，避免内联事件处理程序属性通常被认为是一件好事：考虑通过JavaScript绑定来使脚本更加“不显眼”。您可以编写，将链接的目的地指向它所引用的内容，这对于非JS浏览器是有意义的。然后在最后的脚本中，扫描文档中class=toggler的元素，并将事件处理程序直接附加到元素对象，而不是属性。事件处理程序可以读取this.href.hash以查找要显示/隐藏的元素的ID。感谢提供有关javascript不好的信息：。在href中以这种方式做事情确实更有意义。我只是在javascript方面还没有足够的能力去担心那些东西。在适当的时候。最好在我还在学习的时候限制错误空间。如果内容不是块元素呢？比你的切换功能会导致更多的错误。谢谢。因此，要选择更具体的h2s，我可以使用以下内容：document.getElementByIdbox1.getElementsByTagNameh2；？这似乎是对的。我试试看。再次感谢。我的项目要完成了，谢谢。我最终只是硬编码了elems索引；所以我取消了for循环。它帮助我了解了元素在HTML代码中的顺序。再次感谢。艾贝，是的，很高兴你收到了。对不起，我离开了一会儿。我认为这里最棘手的事情是学习如何使用DOM。祝你好运

elems = document.getElementsByTagName("h2");

for ( i=0; i<elems.length; i++ )
{
if ( elems[i].className == "myAwesomeClass" )
   { //  Do whatever stuff needs to happen to the class
     elems[i].style.color="red"; 
     }
}