显示/隐藏具有相同类名的div-Javascript

我正试图复制一些类似于Google Javascript从头开始实现的东西

基本上有多个同名的div类，并基于向原始类名添加或删除类来显示/隐藏这些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>

Onload两个div似乎都很好地将它们的类设置为隐藏，但是当我单击顶部时，所有内容都消失了，但当我单击底部时，什么也没有发生。我假设我的for循环存在问题，并且它在哪里显示（expando=this.parentNode）。我不知道从这里到哪里去

---

如果您有任何帮助或想法，我们将不胜感激。

Javascript假定只有一个元素具有特定的id（这就是标准所说的）。所以当你说

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

在这里，变量只包含id为

vidItem

的第一个项，并且只将事件附加到该元素

---

这可以通过使用类名而不是id来纠正。

Javascript假定只有一个元素具有特定id（这是标准所说的）。所以当你说

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

在这里，变量只包含id为

vidItem

的第一个项，并且只将事件附加到该元素

---

这可以通过使用类名而不是id来纠正。jQuery可能是一个很好的选择。ID必须是唯一的，但类不是唯一的，因此您可以使用jQuery在纯javascript中使用ID的方式查询具有类名的所有元素。不确定初始状态是什么，所以我在初始加载时隐藏所有内容。我的意思是说下面的一些东西。（代码未经测试。请将其放在html标头中）

或

---

jQuery可能是一个很好的选择。ID必须是唯一的，但类不是唯一的，因此您可以使用jQuery在纯javascript中使用ID的方式查询具有类名的所有元素。不确定初始状态是什么，所以我在初始加载时隐藏所有内容。我的意思是说下面的一些东西。（代码未经测试。请将其放在html标头中）

或

---

首先，不能有多个ID相同的对象。ID在页面中必须是唯一的。因此，您必须使用

id=“vidItem”

修复多个对象。首先，您不能有多个具有相同id的对象。id在页面中必须是唯一的。因此，您必须使用

id=“vidItem”

修复多个对象。

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

<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>

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

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