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); 
}