javascript - 使用相同的 javascript 自动填充多个 div

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')表示选择所有具有count类的元素。第二部分.html(count)表示插入变量count的值。

*有关 jQuery 使用的附加说明:

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