为什么JavaScript不能在所有引用的ID上工作

问题描述：

我正在Joomla网站上工作。现在我需要一个滑块来改变某人悬停在文字链接上的情况。我正在使用一些JavaScript。它使用id =滑块来处理第一个div，而不是在文章中使用id = slider的第二个div上。有人能告诉我为什么这样做吗？为什么JavaScript不能在所有引用的ID上工作

我在Joomla的自定义代码模块中使用以下代码。

<html> 
    <head> 
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> 
    <title>Untitled Page</title> 
    <style type="text/css" media="screen"> 
     <!-- 
     .boxVisible { 
     background-color: #eee; 
     display: block; 
     padding: 5px; 
     float: left; 
     border: solid 1px #000040 
     } 
     .boxHidden { 
     display: none; 
     } 
     --> 
    </style> 
    <script type="text/javascript"> 
     <!-- 
     function showHide(slider) { 
     theBox = document.getElementById(slider); 
     if (theBox.className == "boxVisible") { 
      theBox.className = "boxHidden"; 
     } else { 
      theBox.className = "boxVisible"; 
     } 
     } 
     //--> 
    </script> 
    </head> 
    <body bgcolor="#ffffff"> 
    <p><a href="link.html" onmouseover="showHide('slider'); return false;">More</a></p> 
    </body> 
</html>

这是我的文章：

<div id="slider" class="boxVisible">{loadposition slider1}</div> 
<div id="slider" class="boxHidden">{loadposition slider2}</div> 
<p><br /><br /><br /> {loadposition java}</p>

您不能在多个元素上重复使用“id”值，并期望事情能够正常工作。它们在整个页面中应该是完全独一无二的。 – Pointy 2012-02-01 15:15:49

ID必须是** unique **，具有相同ID的多个元素无效。另请注意，'getElementById'只返回* one *元素（或null），而其他方法（比如'getElementsByTagName'）返回'NodeList'。名称（元素与元素）的区别应该已经成为线索。 – 2012-02-01 15:15:59

答

ID在页面上应该是唯一的。

你可以将你的滑块div封装在一个wrapper div中，并用它作为遍历滑块的基础。

HTML：

<div id="sliders"> 
    <div class="boxVisible"></div>  
    <div class="boxHidden"></div> 
</div>

的Javascript：

function showHide2(slider) { 
var sliders = document.getElementById(slider).getElementsByTagName("div"); 

for (s in sliders) { 
    if (sliders.hasOwnProperty(s)) { 
     if (sliders[s].className == "boxVisible") { 
      sliders[s].className = "boxHidden"; 
      alert('changed visible'); 
     } else if (sliders[s].className == "boxHidden") { 
      sliders[s].className = "boxVisible"; 
      alert('changed hidden'); 
     } 
    } 
} 
} 

showHide2("sliders");

答

ID必须是唯一的标识符。对于多个元素，请使用类名称。

答

的DOM元素不能有相同的ID的！如果你给多个DOM元素使用相同的id，那么javascript将只取第一个。

为什么JavaScript不能在所有引用的ID上工作

相关推荐