为什么javascript不适用于所有引用的ID

Why is the javascript not working on all referenced IDs

本文关键字：引用 ID javascript 不适用 适用于 为什么      更新时间：2023-09-26

我正在Joomla网站上工作。现在，当有人悬停在文本链接上时，我需要一个滑块来更改。我正在使用一些javascript。在本文中，它处理的是第一个id＝slider的div，而不是第二个id＝slider的div。有人能告诉我为什么要这么做吗？

我在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必须是唯一的标识符。对于多个元素，请使用类名。

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

您可以将滑块div封装在一个包装器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");

dom元素不能有相同的id！如果为多个dom元素提供相同的id，javascript将只获取第一个。

相关文章：