我当前正在学习javascript,我的任务之一就是循环遍历具有特定类名的所有div并逐个显示/隐藏它们,其中每个div的时间不同并存储正确的值在具有该特定类名的每个div中的data-attribute标记中。
window.onload = function(){
alpha();
}
function alpha(){
var dataAttribute = 1000;
$(".element").each($).wait(dataAttribute, function(){
$(this).show().delay(dataAttribute).queue(function(){
$(this).hide();
});
});
}
.element{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://creativecouple.github.io/jquery-timing/jquery-timing.js"></script>
<div class="element" data-attribute="1000">One</div>
<div class="element" data-attribute="2000">Two</div>
<div class="element" data-attribute="3000">Three</div>
<div class="element" data-attribute="4000">Four</div>
<div class="element" data-attribute="5000">Five</div>
我最初解决这个问题的想法是用$(this).data(“attribute”)替换dataAttribute变量,但如果我这样做,.wait属性就会停止工作。但是,此方法与.delay属性完美匹配。如果有人能帮助我并解释我做错了什么,我将非常感激。 (另外,如果我可以摆脱额外的计时库,这将是一个重要的奖励,但没有它我经过一些延迟后无法循环通过课程。
你可以使用这样的东西:
function alpha(i = 0) {
var element = $(".element:eq(" + i + ")");
var time = parseInt(element.attr("data-attribute"));
element.show().wait(time, function() {
$(this).hide();
i++;
if (i < ($(".element").length))
alpha(i);
});
}