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

Question

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

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

本例中的class为ITTTI00582。页面上将有一些其他 div 共享相同的内容 class。此 Class 是在运行时生成的，因此它不在 CSS 文件中。

我需要在一个函数中使用此 class 为所有 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 代码分开，并且在删除 class 时更容易将元素重置为原始状态。

这是一个工作示例：

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; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="A00010002-1" class="playerbox winner ITTTI00581">ITTTI00581</div>
<div id="A00010002-1" class="playerbox winner ITTTI00582">ITTTI00582</div>
<div id="A00010002-1" class="playerbox winner ITTTI00583">ITTTI00583</div>
<div id="A00010002-1" class="playerbox winner ITTTI00584">ITTTI00584</div>

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

Change background-color of div for some time and then go back to previous

html

jquery

background-color