Question

我正在使用Joomla网站。现在，当有人将鼠标悬停在文本链接上时，我需要更改滑块。我正在使用一些JavaScript。它正在使用id =滑块处理第一个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>

Answer 1

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

Answer 2

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");

Answer 3

dom元素不能具有相同的id！如果你给多个dom元素提供相同的id，javascript将只占用第一个。

为什么javascript无法处理所有引用的ID

3 个答案: