如何将一类 div 从上到下移动？

Question

我想要的是使用 setInterval() 函数将所有带有“goccia”类的 div 从上到下一起移动。

我不明白为什么它只移动第一个元素 (.goccia)

这是我的 JavaScript 代码。

var campo = document.querySelector('#campo');
var marginTop = 0;

function creaGocce(){
    var numeroGocce = document.querySelector('input').value;
    for (var i = 0; i < numeroGocce; i++) {
       campo.innerHTML += ' <div class = "divGoccia"> <div class = "goccia"> 
    </div> </div>';
    }
}
function scompari(){
    document.querySelector('.contenitore').style.display = 'none';
}
function spostaGocce(){
    var goccia = document.querySelector('.goccia');
    goccia.style.marginTop = marginTop + "px";
    marginTop += 10;
}
function muoviti(){
    scompari();
    creaGocce();
    setInterval(spostaGocce, 1000);
}
document.querySelector('button').addEventListener('click', muoviti);

Answer 1

我想您正试图将您创建的每个 div 发送到底部。

您应该使用css属性“position: absolute”和“top:0px”并将其应用于campo（div的容器）或创建一个新容器。会更容易。

我建议你检查this W3Schools article并尝试每个参数来了解它。

继续编码！