Question

我有这个js代码更新2个div中的2个计数器：

<script type="text/javascript">
    jQuery(document).ready(function($) {
        var div = document.getElementById('count');
        var yeardiv = document.getElementById('yearcount');

        function updateCount() {
            var d = new Date();
            d.setHours(0,0,0,0);
            var count = Math.floor( ( new Date().getTime() - d.getTime() ) / 14200000 );
            div.innerHTML = count;

            d.setMonth( 0 );
            d.setDate( 1 );
            count = Math.floor( ( new Date().getTime() - d.getTime() ) / 14200000 )
            yeardiv.innerHTML = count;
        }

        updateCount();
        setInterval( updateCount, 14200000 );
    });
</script>

这是HTML：

<div id="count"></div>
<div id="yearcount"></div>
...
...
...
<!-- again my divs-->
...
<div id="count"></div>
<div id="yearcount"></div>

我的问题是前2个div用脚本生成的数字填充，而后2个div是空的。

我怎么解决这个问题？

提前致谢。

Answer 1

您的代码存在一些问题。首先，不应对多个元素使用相同的id。而是使用类

<div class="count"></div>
<div class="yearcount"></div>

<!-- other html -->

<div class="count"></div>
<div class="yearcount"></div>

由于您似乎正在使用jQuery，因此请修改您的脚本。

<script type="text/javascript">
jQuery(document).ready(function() {
    function updateCount() {
        var d = new Date();
        d.setHours(0,0,0,0);
        var count = Math.floor( ( new Date().getTime() - d.getTime() ) / 14200000 );
        jQuery('.count').html(count);

        d.setMonth( 0 );
        d.setDate( 1 );
        count = Math.floor( ( new Date().getTime() - d.getTime() ) / 14200000 )
        jQuery('.yearcount').html(count);
    }

    updateCount();
    setInterval( updateCount, 14200000 );
});
</script>

让我解释一下这行代码： jQuery('.count').html(count);

第一部分jQuery('.count')表示选择所有具有类计数的元素。第二部分.html(count)表示插入变量count的值。

*有关jQuery用法的附加说明：

在大多数情况下，您可以使用$代替jQuery来缩短您的代码，例如$('.count').html(count)
而不是使用.html(count)，您也可以使用.text(count)，因为您没有插入任何html标记
您不需要将$传递给jQuery文档就绪回调函数

Answer 2

问题是您使用ID。 ID只能在HTML文档中使用一次。 JavaScript知道这一点，并且只会将更改应用于ID的第一个实例。你应该使用一个类。

Multiples div自动填充相同的JavaScript

2 个答案: