Question

我想循环浏览一系列HTML元素，条件是鼠标点击，即事件序列是： 1. div内的显示元素 2.点击div 3.显示下一个元素 4.单击 5.显示下一个元素 ....等等 6.从最终元素循环回到第一个元素

我创建了以下代码但下一个元素，例如id =＆＃34; image＆＃34;不替换当前元素。这是为什么？请参阅下面的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

这些选择器是错误的：

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

应该是：

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

缺少最后一个元素的逻辑。您可以尝试以下方式：

load_workbook

为什么这个jquery脚本没有循环遍历HTML元素？

1 个答案: