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>

更改div的背景颜色一段时间后再返回上一步

1 个答案: