Question

我正在尝试复制一些类似于Google Javascript from the ground up Accomplishes的内容

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

此处变量仅包含标识为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();

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

2 个答案: