顯示/使用相同的類名隱藏的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

回答

相關問題