循环 class 元素时获取数据属性

Get Data Atribute while looping through class elements

我目前正在学习 javascript,我的任务之一是遍历所有具有特定 class 名称的 div 和 show/hide 它们一个接一个地捕获每个 div 的时间是不同的,并且正确的值存储在每个 div 的数据属性标签中,每个 div 具有特定的 class 名称。

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 属性 配合使用时效果很好。如果有人可以帮助我并解释我做错了什么,我将不胜感激。 (此外,如果我能摆脱额外的计时库,那将是一个主要的好处,但如果没有它,我将无法在某种延迟后循环遍历 classes。

你可以这样使用:

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);
    });
}