每 5 秒将类随机应用于列表项

Question

我有一个有动画的项目列表。在这种情况下，我需要每 5 秒循环更改一次列表项的类。

我有 5 个列表项，在第 1 个没有一个会有类.. 一旦页面打开类必须分配给它们，分别像"card0"、"card1"、"card2"、"card3"、"card4".. 然后每 5 秒它必须循环交换一次

<div class="changelog">
<ul class="entries">
<li class="card0" style="transform: translateY(122px) scale(1.07);">
<p class="meta">
<strong>Connect</strong>
<span>August 1</span>
</p>
<p>Platforms can now export connected account information as a CSV from the Dashboard.</p>
</li>
<li class="card1" style="transform: translateY(152px) scale(1);">
<p class="meta">
<strong>Terminal</strong>
<span>July 30</span>
</p>
<p>You can now use WiFi to connect a P400 card reader to your point of sale application.</p>
</li>
<li class="card2" style="transform: translateY(182px) scale(0.934579);">
<p class="meta">
<strong>Connect</strong>
<span>July 29</span>
</p>
<p>Express accounts now support 5 new languages (German, Italian, Japanese, Spanish, and Simplified Chinese) for the onboarding flow, dashboard, emails, and text messages.</p>
</li>
<li class="card3" style="transform: translateY(212px) scale(0.873439);">
<p class="meta">
<strong>Radar</strong>
<span>July 22</span>
</p>
<p>Set rules with the new <code>is_off_session</code> attribute, which detects if a customer was charged anytime after they initially completed the checkout&nbsp;flow.</p>
</li>
<li class="card4" style="transform: translateY(272px) scale(0.816298);">
<p class="meta">
<strong>Mobile</strong>
<span>July 19</span>
</p>
<p>Our updated mobile SDKs now support in-app 3D Secure 2 authentication, letting you customize the appearance of the authentication&nbsp;UI.</p>
</li>
</ul>
</div>

Answer 1

您必须使用setInterval检查代码段。

var step = 0;
var myInterval = setInterval(function() {
if (step > 5) {
clearInterval(myInterval);
return false;
}
$('.entries li').addClass('card' + step);
step++;
}, 2500);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="changelog">
<ul class="entries">
<li class="card0" style="transform: translateY(122px) scale(1.07);">
<p class="meta">
<strong>Connect</strong>
<span>August  1</span>
</p>
<p>Platforms can now export connected account information as a CSV from the Dashboard.</p>
</li>
<li class="card1" style="transform: translateY(152px) scale(1);">
<p class="meta">
<strong>Terminal</strong>
<span>July 30</span>
</p>
<p>You can now use WiFi to connect a P400 card reader to your point of sale application.</p>
</li>
<li class="card2" style="transform: translateY(182px) scale(0.934579);">
<p class="meta">
<strong>Connect</strong>
<span>July 29</span>
</p>
<p>Express accounts now support 5 new languages (German, Italian, Japanese, Spanish, and Simplified Chinese) for the onboarding flow, dashboard, emails, and text messages.</p>
</li>
<li class="card3" style="transform: translateY(212px) scale(0.873439);">
<p class="meta">
<strong>Radar</strong>
<span>July 22</span>
</p>
<p>Set rules with the new <code>is_off_session</code> attribute, which detects if a customer was charged anytime after they initially completed the checkout&nbsp;flow.</p>
</li>
<li class="card4" style="transform: translateY(272px) scale(0.816298);">
<p class="meta">
<strong>Mobile</strong>
<span>July 19</span>
</p>
<p>Our updated mobile SDKs now support in-app 3D Secure 2 authentication, letting you customize the appearance of the authentication&nbsp;UI.</p>
</li>
</ul>
</div>

Answer 2

此函数将通过具有card*类的每个li元素轮换类。它获取当前类，递增数字(模 5(，然后将其应用于元素。

var step = 0;
var myInterval = setInterval(function() {
$('li[class^="card"]').each(function() {
let thisclass = $(this).attr('class');
let num = (1 + parseInt(thisclass.slice(-1))) % 5;
let nextclass = 'card' + num;
$(this).removeClass(thisclass).addClass(nextclass);
});
}, 1000);

.card0 { background-color: red; }
.card1 { background-color: blue; }
.card2 { background-color: green; }
.card3 { background-color: yellow; }
.card4 { background-color: pink; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="changelog">
<ul class="entries">
<li class="card0">
<p class="meta">
<strong>Connect</strong>
<span>August  1</span>
</p>
</li>
<li class="card1">
<p class="meta">
<strong>Terminal</strong>
<span>July 30</span>
</p>
</li>
<li class="card2">
<p class="meta">
<strong>Connect</strong>
<span>July 29</span>
</p>
</li>
<li class="card3">
<p class="meta">
<strong>Radar</strong>
<span>July 22</span>
</p>
</li>
<li class="card4">
<p class="meta">
<strong>Mobile</strong>
<span>July 19</span>
</p>
</li>
</ul>
</div>

Answer 3

您可以循环访问所有li元素并递增它们的类。

请尝试以下代码段：

var ul = document.getElementsByClassName("entries");
var li = ul[0].children;
function increment(num) {
if( (num + 1) > (li.length - 1) )
return 0;
return num + 1;
}
var interval = setInterval(function() {
for(var i=0; i < li.length; i++) {
var num = li[i].classList[0].substr(4);
li[i].removeAttribute("class");
li[i].setAttribute( "class", "card" + increment(parseInt(num)) );
}
}, 5000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="changelog">
<ul class="entries">
<li class="card0" style="transform: translateY(122px) scale(1.07);">
<p class="meta">
<strong>Connect</strong>
<span>August  1</span>
</p>
<p>Platforms can now export connected account information as a CSV from the Dashboard.</p>
</li>
<li class="card1" style="transform: translateY(152px) scale(1);">
<p class="meta">
<strong>Terminal</strong>
<span>July 30</span>
</p>
<p>You can now use WiFi to connect a P400 card reader to your point of sale application.</p>
</li>
<li class="card2" style="transform: translateY(182px) scale(0.934579);">
<p class="meta">
<strong>Connect</strong>
<span>July 29</span>
</p>
<p>Express accounts now support 5 new languages (German, Italian, Japanese, Spanish, and Simplified Chinese) for the onboarding flow, dashboard, emails, and text messages.</p>
</li>
<li class="card3" style="transform: translateY(212px) scale(0.873439);">
<p class="meta">
<strong>Radar</strong>
<span>July 22</span>
</p>
<p>Set rules with the new <code>is_off_session</code> attribute, which detects if a customer was charged anytime after they initially completed the checkout&nbsp;flow.</p>
</li>
<li class="card4" style="transform: translateY(272px) scale(0.816298);">
<p class="meta">
<strong>Mobile</strong>
<span>July 19</span>
</p>
<p>Our updated mobile SDKs now support in-app 3D Secure 2 authentication, letting you customize the appearance of the authentication&nbsp;UI.</p>
</li>
</ul>
</div>