setInterval多個新創建div

Question

我想建立一個小型網站，我可以顯示不同時區的多個clocs。但是我遇到了setInterval函數的一個問題。

這裏是我的代碼：

function addClock() { 
    $("#container").append('<div class="dclock"></div>'); 
    setInterval(function() { 
    var now = new Date(); 
    var h = now.getHours(); 
    var min = now.getMinutes(); 
    var s = now.getSeconds(); 

    $(".dclock:last").html(h + ":" + (min < 10 ? "0" : "") + min + ":" + (s < 10 ? "0" : "") + s); 
    }, 1000); 
} 

我有一個按鈕，調用addClock功能每次被點擊。添加一個新的時鐘工作正常，但如果我添加第二個時鐘，第一個時鐘停止工作。

Answer 1

因爲您使用最後一個選擇器，所以他們選擇相同的元素。引用您創建的元素，而不是使用選擇器來選擇它。

function addClock() { 
    var div = $("<div class="dclock"></div>"); //new div 
    $("#container").append(div); //add the new div 
    setInterval(function() { 
    var now = new Date(); 
    var h = now.getHours(); 
    var min = now.getMinutes(); 
    var s = now.getSeconds(); 

    div.html(h + ":" + (min < 10 ? "0" : "") + min + ":" + (s < 10 ? "0" : "") + s); //update the html of the div 
    }, 1000); 
}