如何在div上添加一个类？ [英] How to add a class on a div?

问题描述

我有一些代码来显示一系列图像。序列完成后（序列的最后一个图像出现），我希望将一个类 .d-block 切换到 div 与类 .d-none

I have some code to display a sequence of images. After the sequence completes (the last image of the sequence has appeared), I wish to toggle a class .d-block onto the div with the class .d-none

有没有可能做到这一点？

Is it possible to do this?

onload = function startAnimation() { 
    var frames = document.getElementById("animation").children;
    var frameCount = frames.length;
    var i = 0, j = 0;
    var interval = setInterval(function () {
        frames[i % frameCount].style.display = "none";
        frames[++i % frameCount].style.display = "block";
        j++;
        if(j === 14) {
            clearInterval(interval);
        }
    },100); 
}

#animation img {
    display: none;
}
#animation img:first-child {
    display: block;
}
.d-none{
display:none
}
.d-block{
display:block;
}

<div id="animation"> 
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging01.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging02.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging03.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging04.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging05.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging06.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging07.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging08.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging09.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging10.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging11.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging12.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging13.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging14.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging15.png" />
</div>
<div class="d-none">
    This should appear once the sequence is completed!
</div>

推荐答案

您可以使用 document.getElementsByClassName 在 clearInterval 之后切换课程。检查下面的更新片段...

You can use document.getElementsByClassName to toggle class after clearInterval. Check updated snippet below...

onload = function startAnimation() { 
    var frames = document.getElementById("animation").children;
    var frameCount = frames.length;
    var i = 0, j = 0;
    var interval = setInterval(function () {
        frames[i % frameCount].style.display = "none";
        frames[++i % frameCount].style.display = "block";
        j++;
        if(j === 14) {
            clearInterval(interval);
            document.getElementsByClassName("d-none")[0].classList.add('d-block');
            document.getElementsByClassName("d-none")[0].classList.remove('d-none');
        }
    },100); 
}

#animation img {
    display: none;
}
#animation img:first-child {
    display: block;
}
.d-none{
display:none
}
.d-block{
display:block;
}

<div id="animation"> 
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging01.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging02.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging03.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging04.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging05.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging06.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging07.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging08.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging09.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging10.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging11.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging12.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging13.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging14.png" />
    <img src="http://jumpingfishes.com/dancingpurpleunicorns/charging15.png" />
</div>
<div class="d-none">
this div is aappear
</div>

这篇关于如何在div上添加一个类？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！