定期循环元素

Question

我在 JavaScript 中找到了很多显示/隐藏带有超时的 div 的示例，但我似乎无法在这里解决我的确切问题。

我有六个 div。 我想从 1 循环到 6，然后每 10 秒重新循环一次。 我当前的代码在 10 秒后隐藏原始 div（总是希望 div #one 在页面加载时首先显示）并按顺序显示下一个。

我怎样才能每 10 秒按顺序干净地循环这些？

 $(document).ready( function () { startCycle(); }); function startCycle(){ setTimeout(function(){ document.getElementById('one').style.display = 'none'; document.getElementById('two').style.display = 'block'; document.getElementById('three').style.display = 'none'; document.getElementById('four').style.display = 'none'; document.getElementById('five').style.display = 'none'; document.getElementById('six').style.display = 'none'; }, 10000); // 10000ms = 10s }

 #one{ display: block; } #two, #three, #four, #five, #six{ display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <div id="one">Test One</div> <div id="two">Test Two</div> <div id="three">Test Three</div> <div id="four">Test Four</div> <div id="five">Test Five</div> <div id="six">Test Six</div>

Answer 1

我建议您将这些div元素放在容器元素中，这样您实际上就不再需要id属性了。

然后，当您使用 jQuery 时，使用hide和show呼叫。 您可以使用余数运算符 ( % ) 来“循环”索引变量。

为了快速检查这个解决方案，我将延迟减少到半秒：

 $(document).ready( function () { startCycle($("#container").children(), 0); }); function startCycle($elems, i) { $elems.hide().eq(i % $elems.length).show(); setTimeout(() => startCycle($elems, i + 1), 500); // 500ms = 0.5s }

 #container > div { display: none }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <div id="container"> <div>Test One</div> <div>Test Two</div> <div>Test Three</div> <div>Test Four</div> <div>Test Five</div> <div>Test Six</div> </div>

Answer 2

也许是这样的？

 $(document).ready( function () { const eList = document.getElementsByClassName('hideMe'); Object.keys(eList).forEach((elem, index) => { setTimeout(function(){ toogle(eList[index]) }, 10000 * index); }); }); function toogle(elem) { if (elem) elem.classList.toggle('hide') }

 .hide { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <div id="one" class='hideMe hide'>Test One</div> <div id="two" class='hideMe hide'>Test Two</div> <div id="three" class='hideMe hide'>Test Three</div> <div id="four" class='hideMe hide'>Test Four</div> <div id="five" class='hideMe hide'>Test Five</div> <div id="six" class='hideMe hide'>Test Six</div>