Javascript:基本显示隐藏功能

Question

我刚开始学习 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>

这是我到目前为止的代码:

function toggle(whichLayer)
    {
        var elem, vis;

        if (document.getElementById) // this is the way the standards work
        {
            elem = document.getElementById(whichLayer);
        }

        vis = elem.style;

        // if the style.display value is blank we try to figure it out here
        if (vis.display == '' && elem.offsetWidth != undefined && elem.offsetHeight != undefined)
        {
            vis.display = (elem.offsetWidth != 0 && elem.offsetHeight != 0) ? 'block' : 'none';
        }

        vis.display = (vis.display == '' || vis.display == 'block') ? 'none' : 'block';       
    }

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

1. 我希望能够将点击时的 [+] 切换为 [-]，反之亦然。
2. 我希望能够隐藏 div.content
3. 我希望能够切换时间跨度，从时间可见到另一个时间，反之亦然。

我可以考虑如何用伪代码来做到这一点，但我对 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 中选择类的地方。我不知道如何通过类名来交互它们。我使用谷歌找到了关于如何执行 getElementByClass() 实现的东西，因为 JS 没有，但它在我头上。

如有任何帮助，我们将不胜感激。

Answer 1

最新的浏览器支持 document.getElementsByClassName。 IE8 没有。 ( http://www.quirksmode.org/dom/w3c_core.html#t11 ) 大多数 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("*") 来选择所有标签，但这可能需要浏览器处理更长的时间。