表示/同じクラス名を持つdivを非表示にする - Javascriptを

Question

私は地面からGoogleのJavascriptが

http://code.google.com/edu/submissions/html-css-javascript/#javascript

は、基本的には同じ名前を持つ複数のdivのクラスを持って実現するものに似た何かを複製しようとしていますし、元のクラス名にクラスを追加することに基づいてそれらの表示/非表示を切り替えます。

相続人は私のマークアップ

<div class="vidItem" id="vidItem"> 
<div class="vidTitle"> 
<h2></h2> 
</div> 
<div class="vidContain" id="vidContain"> 
<iframe class="testtt" width="560" height="315" src="-----" frameborder="0" allowfullscreen>   </iframe> 
</div> 
    </div> 

    <div class="vidItem" id="vidItem"> 
    <div class="vidTitle"> 
    <h2></h2> 
    </div> 
<div class="vidContain" id="vidContain"> 
    <iframe width="560" height="315" src="----" frameborder="0" allowfullscreen></iframe> 
</div> 
    </div> 

相続人は私のjavascriptの

var toggleExpando = function() { 
var expando = this.parentNode; 

    if (hasClass(expando, 'hide')) { 

     removeClass(expando, 'hide'); 
     addClass(expando, 'show'); 

    } else { 

     removeClass(expando, 'show'); 
     addClass(expando, 'hide'); 
} 
}; 


var expandos = getElementsByClass('vidContain'); 
for (var i=0; i < expandos.length; i++) { 
    addClass(expandos[i], 'hide'); 
    var expandoTitle = document.getElementById('vidItem'); 
    addEventSimple(expandoTitle, 'click', toggleExpando); 
} 

---

} 

ロード時のdivの両方がうまく隠すために自分のクラスを設定しているようだが、私はをクリックしたときトップ1はすべて消えますが、ボトムをクリックすると何も起こりません。私は私のforループに問題があると仮定しています、そして、それは（expando = this.parentNode）と言います。私はここからどこに行くのか分かりません。

ご意見やご感想をお寄せください。

Answer 1

jQueryはこれに適したオプションです。 IDは一意である必要がありますが、クラスはそうではありません。そのため、jQueryを使用して、まっすぐなjavascriptで同じ方法でクラス名を持つすべての要素を照会することができます。最初の状態を何にしたいのかはわからないので、私はすべてのインサイトの負荷を隠しています。下の行に沿った何かが私の言うことです。 （コードがテストされていないのhtml頭に入れてください。）

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('.vidItem').addClass('hide'); 
    $('.vidItem').click(function(){ 
     $('.vidItem').addClass('hide'); 
     $(this).removeClass('hide'); 
     $(this).addClass('show'); 
    }); 
}); 
</script> 

あなたはそれが転移の効果と素敵に見えるようにしたい場合は、次のようなjQueryのもので、ビルドの一部を使用することができます。

$('.vidItem').fadeOut(); 
$(this).fadeIn(); 

または

$('.vidItem').slideUp(); 
$(this).slideDown(); 

Answer 2

Javascriptでは、特定のIDを持つ要素が1つしかないと仮定しています（これは標準といえます）。あなたが言うとき..だから

var expandoTitle = document.getElementById('vidItem'); 

は、ここでは、変数は、ID vidItemでのみ最初の項目が含まれており、その要素のみにイベントをアタッチします。

これは、idの代わりにクラス名を使用して修正できます。