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，这是所有代码应该做的。以下是我希望能够做到的事情：

我希望能够将点击[+]切换为[ - ]，反之亦然。
我希望能够隐藏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中选择类的地方。我不知道如何通过类名来与它们进行交互。我发现使用谷歌的东西如何做一个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（“*”）来选择所有标签，但浏览器可能需要更长时间才能处理。

Javascript：基本显示隐藏功能

1 个答案: