javascript - jquery - 添加与 HTML div 关联的多个计时器

Question

我有以下 DIV包含多个 cards元素:

每一个 cards有以下 HTML结构:

<div class="user-w">
                        <div class="avatar with-status status-green">
                          <img alt="" src="img/avatar1.jpg">
                        </div>
                        <div class="user-info">
                          <div class="user-date">
                            12 min
                          </div>
                          <div class="user-name">
                            John Mayers
                          </div>
                          <div class="last-message">
                            What is going on, are we...
                          </div>
                        </div>
                      </div>

那些cards使用 ajax 动态加载.我需要的是附加到每个 <div class="user-w">一个秒表，这样我就可以在耗时为 4 分钟时更改背景颜色，或者在耗时达到 6 分钟时将其隐藏。

我正在考虑使用 SetInterval多次，因为我认为这是不可能的。

每个DIV卡片元素在时间上应该完全独立于其他元素。

Any clue on how to do it correctly?

Answer 1

当您从 ajax 对象构建卡片时，设置一个数据元素来存储卡片上的时间戳。使用 setInterval 触发循环遍历所有卡片的函数，并根据当前时间检查它们的时间戳，并更新 ui 上的日期、更改 bgcolor 或完全删除元素。