javascript - 在多个新创建的 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);
}