jquery - 改变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 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>