このjqueryスクリプトがHTML要素をループしていないのはなぜですか？

Question

私はマウスを条件HTML要素の一連のループにしたい一連のイベントがあるすなわちクリック：divの 3.表示次の要素 4.クリック 5.ディスプレイ上のdiv 2.内部 1.表示素子次の要素 ....など 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;