javascript - 使用javascript在单个页面上减少具有相同类的多个数字

Question

我在一个页面上有 6 个数字，每个数字都在它自己的 div 中，具有“间隔”类。我需要使用单一的 javascript 方法来减少 DIV 内每个整数的innerHTML。这是 html:

<div class="timer">54</div>
<div class="timer">98</div>
<div class="timer">100</div>
<div class="timer">24</div>
<div class="timer">8</div>
<div class="timer">16</div>

这是我尝试的 JavaScript:

$(document).ready(function () {

    var intervalCountDown = window.setInterval(decrementTimeRemaining, 1000);

    function decrementTimeRemaining() {
       $('.timer').html($(".timer").html() - 1);
    }

});

预期输出(1 秒后)将是 53, 97, 99, 23, 7, 15。每一秒这些数字都会再次递减。相反，发生的情况是在第一秒之后，具有计时器类的每个元素变成53，然后都是并发减。

Answer 1

使用.html(function) :

$('.timer').html(function(index, html) {
  return html - 1;
});

根据您的情况，您还可以使用 .text(function) :

$('.timer').text(function(index, text) {
  return text - 1;
});

请注意，每个值都是字符串“54”，“98”，...因此需要将其转换为数字，这在使用时会自动发生一元减 (-) 运算符，但如果使用一元加 (+) 运算符，则不会发生这种情况，因为它也是连接运算符:

"2" - 1 // 1
"2" + 1 // "21"

看看parseInt(string, radix)