顯示/隱藏具有相同類名的Div - Javascript

Question

我試圖復制一些類似於來自Ground up的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);
}

---

   }

Onload這兩個div似乎設置他們的類隱藏得很好，但是當我點擊頂部時，一切都消失了但是當我點擊底部時沒有任何反應。 我假設我的for循環和它所說的地方有問題（expando = this.parentNode）。 我不知道從哪里開始。

任何幫助或想法將不勝感激。

Answer 1

Javascript假設只有一個元素具有特定的id（這就是標准所說的）。 所以當你說..

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

這里變量只包含id為vidItem第一個項目，並僅將事件附加到該元素。

這可以通過使用類名而不是id來更正。

Answer 2

jQuery可能是一個很好的選擇。 ID需要是唯一的，但類不需要，因此您可以使用jQuery以與使用jQuery中的id相同的方式查詢具有類名的所有元素。 不確定你想要的初始狀態是什么，所以我隱藏所有的初始負荷。 我的意思是下面的東西。 （代碼未經測試。將其放在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();