爲什麼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>

來源

2012-02-01 Bas Goorden

您不能在多個元素上重複使用「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");

來源

2012-02-01 15:15:52

ID必須是唯一的標識符。對於多個元素，請使用類名稱。

來源

2012-02-01 15:15:36

的DOM元素不能有相同的ID的！如果你給多個DOM元素使用相同的id，那麼javascript將只取第一個。

來源

2012-02-01 15:16:10 eyurdakul

爲什麼JavaScript不能在所有引用的ID上工作

回答

相關問題