使用 Javascript（或 JQuery）将计数计时器添加到动态添加的 JQuery 可排序列表项

Question

我正在尝试创建一个 Javascript 函数，它将一个多行条目（包括一个计数计时器）（每个都在一个单独的行上）附加到一个 Jquery 可排序列表中。我的目标是让它在单击图像时触发，以将多行项目添加到 Sortable1 中的列表中。我希望它看起来像这样，然后可以将 3 行块从可排序列表拖动到可排序列表（例如，作为一个列表项）。

乔先生的博客
33岁
00.15

（其中 00.15 是倒数计时器）。

我可以创建一个多行列表条目，但无法在其中获取计时器。当我尝试将计时器放入时，该功能不再起作用。目前的功能（多行列表项被推入Sortable1）是：

function AddListItem() {
         
    var Name = "Mr Joe Bloggs"
    var Age = "33 Years of Age"
    
    var sec = 0;
    function pad ( val ) { return val > 9 ? val : "0" + val; }
    setInterval( function(){
        document.getElementById("seconds").innerHTML=pad(++sec%60);
        document.getElementById("minutes").innerHTML=pad(parseInt(sec/60,10));
    }, 1000);

    
    var ul = document.getElementById("sortable1");   
  var li = document.createElement("li"); 
   li.classList.add("ui-state-default");
  li.appendChild(document.createTextNode(Name));
li.appendChild(document.createElement("br"));
    li.appendChild(document.createTextNode(Age));
li.appendChild(document.createElement("br"));
    li.appendChild(document.createElement(id="minutes"));
    li.appendChild(document.createTextNode(":"));
    li.appendChild(document.createElement(id="seconds"));   
  ul.appendChild(li);
}

我认为计时器脚本需要与创建其他行的功能相同，以便数据同时可用以将所有列表组件一起添加到列表项中（名称、年龄和计时器) .

我尝试过使用： li.appendChild(document.createTextNode("分钟")); li.appendChild(document.createTextNode("seconds"));

在 appendChild 部分的末尾，我尝试过： li.appendChild(document.createTextNode(id="minutes")); li.appendChild(document.createTextNode(id="seconds"));这也不起作用，因为没有这样的选项。

我尝试创建一个引用文本节点的变量，以查看是否可以通过这种方式获得“Id”（例如“秒”和“分钟”），但没有运气。

我也试过了：

li.appendChild(document.createTextNode("minutes")); li.setAttribute = ("id", "分钟"); li.appendChild(document.createTextNode("seconds")); li.setAttribute = ("id", "seconds");

但这会用计时器替换其他列表项（姓名和年龄），因为它似乎不仅仅局限于“分钟”或“秒”TextNode 添加。

我似乎看不到将 Id（“秒”和“分钟”）放入列表项（作为 Id）中的方法，以便内部 HTML 可以注入其中。请问这种放置计时器的方法是否可以以某种方式工作，或者是否有另一种方法可以将（向上计数）计时器作为列表项中的最后一行添加到可排序列表整体中？

顺便说一句，如果我想多次单击图像，我想我需要进一步操作，因为我会尝试将相同的计时器注入多个列表项，这会导致其自身的问题。现在我正在尝试成功地让计时器进入。

任何帮助表示赞赏。

Answer 1

我一直在努力寻找解决方案，以防万一有人感兴趣。

我没有添加大量的 li.append.Child'd，而是使用了 jQuery，如下所示：

$(document).ready(function(){
$("#sortable1").append('<li class="ui-state-default">' + Name +  '<br>' + 
Age + '<br>' + '<span id="minutes">' + '' + '</span>' + ':' + '<span 
id="seconds">' + '' + '</span>' + '</li>');

现在的问题（正如预测的那样）是解决如何确保为每个列表项添加的计时器是独立的并且不会相互冲突。

干杯