Получить атрибут данных при циклическом просмотре элементов класса - PullRequest
Новая
       51

Получить атрибут данных при циклическом просмотре элементов класса

0 голосов
/ 14 февраля 2019

Я в настоящее время нахожусь в процессе изучения javascript, и одна из моих задач состоит в том, чтобы перебрать все div с определенным именем класса и показать / скрыть их один за другим с уловкой, где время для каждого div отличается и правильноезначение сохраняется в теге атрибута данных в каждом div с указанным именем класса. 

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>

Моя первоначальная идея для решения этой проблемы состояла в том, чтобы заменить переменную dataAttribute на $ (this) .data ("attribute"), но если ясделайте так, чтобы свойство .wait перестало работать.Однако этот метод прекрасно работает со свойством .delay.Я был бы чрезвычайно признателен, если бы кто-то мог помочь мне и объяснить, что я делаю неправильно.(Кроме того, если я смогу избавиться от дополнительной библиотеки синхронизации, это было бы серьезным бонусом, но без нее я не смог бы пройтись по классам после некоторой задержки.

1 Ответ

0 голосов
/ 14 февраля 2019

Вы можете использовать что-то вроде этого: 

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