我想循环访问一系列以鼠标单击为条件的 HTML 元素,即事件的顺序是: 1.在div中显示元素 2.点击分区 3.显示下一个元素 4.点击 5.显示下一个元素 ....ETC 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
});
});
};
最佳答案
这些选择器是错误的:
$("frames".eq(i))...
$("frames".eq(x))...
应该是:
$(".frame").eq(i)...
$(".frame").eq(x)...
并且缺少最后一个元素的逻辑。你可以尝试这样的事情:
var x = (i + 1) % frames.length;
关于javascript - 为什么这个 jquery 脚本不循环遍历 HTML 元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41403045/