jquery - 更新从 x 秒向上计数的单个跨度标签

Question

我有几个<span>可以保存秒的标签。
例子：
<span class="timeout">27</span>
<span class="timeout">58</span>

我试图每次将它们增加 1 秒，但我遇到了一些困难，即它在<span>标签中放置了错误的数据。

我一定是做错了什么，下面是我正在尝试使用的代码。
它一定是错误的并且充满了错误，但是，我仍在努力学习它;-)

function timer() {
    var self = $(this);
    var idx  = $("span.timeout");
    var sec = parseInt(self.find('span.timeout').text())
    var interval = setInterval(function() {
        idx.each(function() {
            idx.text(sec++)
        });
    }, 1000);
}

在此先感谢
- 罗伯特。

Answer 1

你想这样做：

function timer() {
    var self = $(this);
    var idx = $("span.timeout");
    //console.log(self.find('span.timeout').text()); //gets you nothing
    var interval = setInterval(function () {
        idx.text(function (_, txt) { //use .text()
            return parseInt(txt, 10) + 1; //convert the current text to int and increment it.
        });
    }, 1000);
}

小提琴

您的问题在这里var sec = parseInt(self.find('span.timeout').text())只是您的案例中的一个窗口，您正在尝试在其中找到跨度并获取它的文本。这让你一无所获，而你却 parseInt在无所作为，NAN而你却用它来计算，这是错误的。因此，您可以使用文本函数的回调并获取该跨度的当前文本值，然后返回该跨度的更新值。