Почему этот jquery-скрипт не перебирает элементы HTML?

Question

Я хочу, чтобы петли через ряд HTML элементов обусловливающие МЫШЬЮ т.е. последовательность событий: 1. индикаторный элемент внутри сНу 2. Нажмите на ДИВ 3. дисплей следующего элемента 4. Нажмите 5. Дисплей следующий элемент .... и т. д. 6. петля с конечного элемента обратно на первый элемент

Я создал следующий код, но следующий элемент, например id = "image", не заменяет текущий элемент. Почему это? См. HTML, CSS и JS ниже.

<div class="frame" id="title">CULTURAL</div> 
<div class="frame" id="image"> 
    <img class="topLeft" src="images/zanzibar_market_1.jpg" alt="Zanzibar Cloth"> 
</div> 
<div class="frame" id="text">A culture encompasses the ideas, customs, and social behaviour of a people or society. 
    When we mix with other cultures we are enriched by the experience. We know more of the world.</div> 

.frame { 
    margin: auto; 
    width: 300px; 
    height: 300px; 
    border: 1px solid skyblue; 
} 
#title { 
    font-size: 2em; 
    opacity: 1.0; 
} 
#image { 
    opacity: 0.0; 
} 
#text { 
    opacity: 0.0; 
} 

var frames = document.getElementsByClassName("frame"); 

for(var i=0; i<frames.length; i++){ 
    $("frames".eq(i)).click (function() { 
     $("frames".eq(i)).animate({ 
      opacity: 0.0 
     }); 
     var x = i + 1; 
     $("frames".eq(x)).animate({ 
      opacity: 1.0 
     }); 
    }); 
}; 

Answer 1

Эти селекторы неправильно:

$("frames".eq(i))... 
$("frames".eq(x))... 

должно быть:

$(".frame").eq(i)... 
$(".frame").eq(x)... 

И ваша логика для последнего элемента отсутствует. Вы можете попробовать что-то вроде:

var x = (i + 1) % frames.length;