将Javascript的脚本Id更改为Class

Question

嗨，我正在构建这个滚动框，有一个内置的隐藏下拉列表。其实不是一个下拉列表，但表现得像一个。我的问题是，我不知道如何将javascript的脚本从ID更改为类。这样，我就可以在滚动框中列出的所有项目上使用该javascript。现在，我只将javascript的脚本嵌入到html文档中，而不是作为链接。

到目前为止，情况是这样的：

头中的Javascript

<script>
function unhide(divID) { 
    var item = document.getElementById(divID); 
    if (item) {  item.className=(item.className=='hidden')?'unhidden':'hidden'; }  
} 
< /script >

代码中的问题

<ol align="center" style="font-weight: bold">Item</ol><!--Box Title-->
<div id="f1" style="height: 80px; width: 150px; overflow: scroll; border: 9px groove #FFC400"><!--scroll box-->

<!--subject 1-->
<div>
    <a href="javascript:unhide('learnHTML');">Name1 </a>
</div>
<div id="LearnHTML" class="hidden">
    <ul>
        <li><a href=""> info/description </a></li>
        <li><a target="_blank" href="">CLICK HERE TO PLAY</a></li>
    </ul>
</div>

<!--subject 2-->
<a href="javascript:unhide('learnHTML');">Name2 </a>
<div>
<div id="LearnHTML" class="hidden">
    <ul>
        <li><a href=""> info/description </a></li>
        <li><a target="_blank" href="">CLICK HERE TO PLAY</a></li>
    </ul>
</div>

<!--subject 3-->
    <a href="javascript:unhide('learnHTML');">Name3 </a>
    <div>
        <div id="LearnHTML" class="hidden">
            <ul>
                <li><a href=""> info/description </a></li>
                <li><a target="_blank" href="">CLICK HERE TO PLAY</a></li>
            </ul>
        </div>
    </div> <!--End Scroll Box-->
</div>

因此，所有列出的项目的下拉列表，列出的项目在滚动框中，是隐藏的，直到列出的项目被点击。此外，通过再次单击相同的列表项目，它将再次隐藏其下拉列表。

基本上，我希望滚动框中列出的所有项目与第一个列表项的作用相同。但是，我不知道如何将Javascript的Id更改为一个类来完成这项工作。

通过这样做，我尝试将Javascript的Id更改为自己的类：

< script >
function unhide(divClass) {  var item = document.getElementByClassName(divClass);  if (item) {  item.className=(item.className=='hidden')?'unhidden':'hidden';  }  } < /script >

然后我把id="LearnHTML"改成了class="LearnHTML"，但是它没有起作用。那么，有谁知道如何使它发挥作用呢？

列表项的CSS：

.hidden { display: none;}
.unhidden { 
    display: block; 
    background-color:orange;
    font: white;
    align:left
}

Answer 1

• 首先，我相信，信的外壳确实很重要。Javascript必须与HTML匹配。
• ID必须是唯一的。在html文档中只能有一个ID。这就是为什么其他人都不工作。
• 使用该类将无法工作，因为您无法指定要切换哪个类。它将切换所有这些类，代码需要更复杂一些才能处理多个类。

因此，使用接受DivID的unhide方法，将ID从"LearnHTML"更改为"LearnHTML1"、"LearnHTML2"、...，并确保切换链接与情况匹配。

顺便说一句，您不能有两个同名的方法。Javascript不支持重载。

这是小提琴：http://jsfiddle.net/Arlen22/tZdfx/2/