Question

我在一个页面上有6个数字，每个数字都在其自己的div中，并且有一个＆＃39; interval＆＃39;。我需要用一个单一的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)

Answer 2

使用此功能：

function decrementTimeRemaining() {
   $('.timer').each(function(idx, value) {
       $(value).html(parseInt($(value).html()) - 1);
   });
}

Answer 3

在您的代码中，您尚未选择所有具有类名称为“timer”的元素。您必须使用jquery中的each方法遍历所有元素，然后使用$(this)选择并更新循环中的当前字段。使用以下代码段。

    <script>
        window.setInterval(decrementTimeRemaining, 1000);
        function decrementTimeRemaining() {
            $('.timer').each(function(){            
            $(this).html(parseInt($(this).html()) - 1);
            });
        }
</script>

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

3 个答案: