显示/使用相同的类名隐藏的div - 使用Javascript

我试图复制类似的东西是什么，从地上爬起来的谷歌的Javascript实现显示/使用相同的类名隐藏的div - 使用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）。我不知道该从哪里出发。

任何帮助或想法，将不胜感激。

来源

2012-02-29 stilts

首先，不能有多个具有相同ID的对象。 ID在页面中必须是唯一的。所以，你必须用'id =“vidItem”'修复多个对象。 – jfriend00 2012-02-29 16:01:12

jQuery可能是一个很好的选择。 ID需要是唯一的，但类不需要，所以你可以用类名查询所有元素，就像使用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();

来源

2012-02-29 16:22:06 Tony

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

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

这里的变量只包含第一项id为vidItem，重视事件只是该元素。

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

来源

2012-02-29 16:01:38

非常感谢 – stilts 2012-02-29 16:19:24

显示/使用相同的类名隐藏的div - 使用Javascript

回答

相关问题