如何從上到下移動一類 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 的容器）或創建一個新容器。 會更容易。

我建議您查看這篇 W3Schools 文章並嘗試了解每個參數。

繼續編碼！