更改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的背景顏色一段時間，然後返回到上一個

回答

相關問題