更改JavaScript的脚本ID到类

问题描述：

嗨，我建立这个滚动框有一个内置的隐藏下拉列表。那么，实际上并不是一个下拉列表，而是像一个行为。我的问题是我无法弄清楚如何将JavaScript的脚本从ID更改为CLASS。这样我可以在滚动框内列出的所有项目上使用该JavaScript。现在我只是将javascript脚本嵌入到html文档中而不是作为链接。更改JavaScript的脚本ID到类

这是什么样子至今：

的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>

因此，所有列出的项目下拉下拉列表，滚动框内列出的项目，都隐藏起来n直到列出的项目被点击。另外，再次点击相同的列表项，它会再次隐藏下拉菜单。

基本上，我希望滚动框中列出的所有项目的行为与第一个列出的项目相同。但是，我无法弄清楚如何将JavaScript的ID更改为一个类来完成这项工作。

我试图改变JavaScript的标识一类我自己，这样做：

<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 
}

相反张贴破HTML，使之出现，后期格式良好的HTML，选中它，然后单击代码示例**的'{}'**按钮编辑区上方。 – 2013-03-14 20:51:32

欢迎来到[SO]; [阅读编辑帮助页面，然后重新格式化您的问题]（http://*.com/editing-help） – zzzzBov 2013-03-14 20:54:16

您应该注意到'document.getElementByClassName'因为它不存在而引发错误。正确的方法是'.getElementsByClassName'，它返回一个节点集合。 – Shmiddty 2013-03-14 20:54:59

答

首先，信外壳事情发生了，我相信。 Javascript必须与HTML匹配。
ID必须是唯一的。您可以在html文档中只有一个ID。这就是为什么其他人不工作。
使用该类将不起作用，因为您无法指定要切换哪一个。它将切换所有这些，并且代码将需要更复杂来处理多个类。

因此，使用，是以DIVID取消隐藏方法，这些ID改变从"LearnHTML"到"LearnHTML1"，"LearnHTML2"，...，并确保肘杆的情况相匹配。

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

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

感谢您的有用提示。非常感谢！） – user2171378 2013-03-14 22:29:33

更改JavaScript的脚本ID到类

相关推荐