Question

<div id='a'> Apple </div>
<div id='b'> Berry </div>
<div id='c'> Cherry </div>

$(document).ready(function () {
    $(#a).hide;
    $(#b).hide;
    $(#c).hide;

    var arr = ["a", "b", "c"];
    var i;
    for (i = 0; i < 10; i++) {
        for (j = 0; j < arr.length; i++) {
            setInterval(function(){ arr[j].show(); }, 10 * 1000);
            arr[j].hide();
        }                
    }
});

步骤：隐藏所有div。循环10次。显示每个div 10秒钟，然后隐藏。

在此示例中，有3个div。可能会有更多或更少的div。因此，我猜需要某种数组。

Answer 1

获取所有div，在promise中使用setTimeOut，并在指定时间完成后解析promise。

在setTimeout内，保留一个索引变量i，该变量将循环遍历div，并在其值小于i时将zero的索引设置为let prevDiv = null; const divs = document.querySelectorAll('div'); const length = divs.length; let i = 0; const delay = function() { return new Promise((resolve) => { setTimeout(() => { if (prevDiv) { prevDiv.classList.remove('active'); prevDiv.classList.add('hide'); } i = i < divs.length ? i : 0; divs[i].classList.remove('hide'); divs[i].classList.add('active'); prevDiv = divs[i]; i++; resolve(); }, 1000); }); } async function calc() { for (let i = 0; i < 10; i++) { await delay(); } } calc();。 div的长度（从第一个div开始循环）。

.active {
  display: block;
}

.hide {
  display: none;
}

<div id='a' class="hide"> Apple </div>
<div id='b' class="hide"> Berry </div>
<div id='c' class="hide"> Cherry </div>

{{1}}

Answer 2

尝试（我将时间缩短到2秒。）

var arrIds = ["a", "b", "c"];

$(document).ready(function () {

  setInterval(function(){ 

   showAll();
   setTimeout(hideAll, 1*1000);

  }, 2*1000);
});

function showAll () {
  arrIds.forEach(function (e) {
   $('#'+e).removeClass('hidden');
  });
}

function hideAll () {
  arrIds.forEach(function (e) {
   $('#'+e).addClass('hidden');
  });
}

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Started.
<div id="a" class="hidden"> Apple </div>
<div id="b" class="hidden"> Berry </div>
<div id="c" class="hidden"> Cherry </div>

在jquery中，如何循环每个div，并显示每个div 10秒钟，然后隐藏

2 个答案: