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

我有一个包含多个div的页面。我需要改变给定时间的一组定义的div的背景颜色。该组由它具有类定义，例如更改div的背景颜色一段时间，然后返回到上一个

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

在这种情况下的类是ITTTI00582。网页上还会有其他几个div共享同一个班级。此类在运行时生成，因此它不支持CSS文件。

我需要在一个函数中用这个类对所有div进行着色，然后将颜色恢复到之前的状态。这不起作用：

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

此外，一旦我分配的颜色，我该如何删除作业？

来源

2017-03-03 sharkyenergy

添加或删除风格 – guradio

使用类的类不是CSS的。 – Aslam

您可以使用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>

来源

2017-03-03 11:10:41

谢谢，但我需要在css中定义一个类“highlite”吗？我是否正确地得到它：我使用ITTTI00582只是为了定义哪些div获得额外的类高亮添加？ – sharkyenergy

没错，您需要添加该类。我为你添加了一个工作示例 –

它似乎没有在我的末端工作..类没有分配。（我暂时删除超时），如果我rightclick->检查对象，我看到它有除提到的所有类。我还用消息框验证了idclass变量是否正确，并且是。 – sharkyenergy

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

回答

相关问题