2012-02-01 5 views
0

誰かがテキストリンクの上を移動するときに変更するスライダーが必要です。私はいくつかのJavaScriptを使用しています。これは、id =スライダーの最初のdivで動作していますが、記事のid = sliderの2番目のdivでは動作していません。誰かがなぜこれをやっているのか教えてもらえますか?参照されているすべてのIDでjavascriptが機能しないのはなぜですか?私はJoomlaのウェブサイトで作業しています。

私は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> 
+0

複数の要素で「id」値を再利用することはできません。彼らはページ全体にわたって完全にユニークであると考えられています。 – Pointy

+0

IDは**ユニーク**でなければなりません。同じIDを持つ複数のエレメントが無効です。 'getElementById'は* one *要素(またはnull)だけを返しますが、他のメソッド、例えば' getElementsByTagName'は 'NodeList'を返します。名前の違い(Element vs Elements)はすでに手がかりになっているはずです。 –

答えて

0

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

IDは一意の識別子でなければなりません。複数の要素の場合は、クラス名を使用します。

0

DOM要素は、idを同じにすることはできません!同じidを複数のDOM要素に与えると、javascriptは最初のものだけを取ります。

関連する問題