改变div的背景颜色一段时间，然后回到上一个

Question

我有一个包含许多 div 的页面。我需要在给定的时间内更改一组定义的 div 的背景颜色。该集合由它所具有的类定义，例如

<div id="A00010002-1" class="playerbox winner ITTTI00582" style="background-color: ......>

本例中的类是ITTTI00582. 页面上还会有一些其他 div 共享同一个类。这个类是在运行时生成的，因此它不支持在 CSS 文件中。

我需要在函数中使用此类为所有 div 着色，然后将颜色恢复为之前的颜色。这不起作用：

$('.' + idclass).css('background-color', '#FFFF00'); 

另外，一旦我分配了颜色，我该如何删除分配？

Answer 1

您可以使用setTimeout()在给定延迟后执行一些代码。尝试这个：

var $elements = $('.' + idclass).addClass('highlight');
setTimeout(function() {
    $elements.removeClass('highlight')
}, 5000); // 5000ms = 5 seconds

注意这里的addClass()和的使用removeClass()。这是更好的做法，因为它将样式逻辑与 JS 代码分开，并且在删除类时更容易将元素重置为其原始状态。

这是一个工作示例：

var $elements = $('.' + idclass).addClass('highlight');
setTimeout(function() {
    $elements.removeClass('highlight')
}, 5000); // 5000ms = 5 seconds

var idclass = 'ITTTI00582';

var $elements = $('.' + idclass).addClass('highlight');
setTimeout(function() {
  $elements.removeClass('highlight')
}, 5000); // 5000ms = 5 seconds

.playerbox.winner { background-color: grey; }
.playerbox.winner.highlight { background-color: yellow; }