Отображение/скрытие дивы с тем же именем класса - Javascript

Question

Я пытаюсь повторить что-то подобное тому, что позволяет выполнить Google Javascript с нуля

http://code.google.com/edu/submissions/html-css-javascript/#javascript

В основном имеют несколько Див классы с таким же именем и показать/скрыть те, основанные на добавлении удаления классов в исходное имя класса.

Heres мой разметки

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

Heres мой 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 обе дивы, кажется, устанавливать свои классы, чтобы скрыть только штраф, но когда я нажимаю на наверху все исчезает, но когда я нажимаю на нижнюю, ничего не происходит. Я предполагаю, что есть проблема с моим циклом for, а также там, где он говорит (expando = this.parentNode). Я понятия не имею, куда идти отсюда.

Любая помощь или идеи будут оценены.

Answer 1

jQuery может быть хорошим вариантом для этого. Идентификатор должен быть уникальным, но классы этого не делают, поэтому вы можете запросить для всего элемента имя класса так же, как и с id в прямом javascript, используя jQuery. Не уверен, что вы хотите, чтобы начальное состояние было таким, что я скрываю все на исходной нагрузке. Что-то в строках ниже - это то, что я имею в виду. (Код тестировался поместить его в 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(); 

Answer 2

Javascript предполагает, что существует только один элемент с определенным идентификатором (и это то, что стандарт говорит). Так что, когда вы говорите ..

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

здесь переменный содержит только первый элемент с идентификатором vidItem и придает событие только этот элемент.

Это может быть исправлено с использованием имен классов вместо id.