Ich erstelle eine kleine Fernsehzeitschrift für mich selbst und habe eine Liste von Programmen eines Fernsehsenders, der heute läuft. Was ich nun versuche, ist, drei verschiedene CSS-Klassen hinzuzufügen, eine für das Programm, das gerade ausgestrahlt wird (.present), eine für Sendungen vor der aktuellen (.past) und eine für die Sendungen nach der aktuellen (.future).
Ich erhalte die aktuelle Zeit mit
var d = new Date();
var curr_hour = d.getHours();
var curr_min = d.getMinutes();
for (var i = 2; i--; )
curr_min[i] = ("0" + curr_min[i]).slice(-2);
var curr_time = curr_hour + ":" + curr_min;
Das HTML sieht in etwa so aus:
<div class="title">15:00 - Show 1</div>
<div style="display: none;" class="description">Information about show 1.</div>
<div class="title">15:30 - Show 2</div>
<div style="display: none;" class="description">Information about show 2.</div>
<div class="title">16:00 - Show 3</div>
<div style="display: none;" class="description">Information about show 3</div>
Wenn also die aktuelle Zeit 15:45 ist, möchte ich, dass das Div mit Show 2 eine zusätzliche Klasse .present hat, das Div mit Show 1 die zusätzliche Klasse .past und das Div mit Show 3 die zusätzliche Klasse .future. Also, etwas wie:
<div class="title past">15:00 - Show 1</div>
<div style="display: none;" class="description">Information about show 1.</div>
<div class="title present">15:30 - Show 2</div>
<div style="display: none;" class="description">Information about show 2.</div>
<div class="title future">16:00 - Show 3</div>
<div style="display: none;" class="description">Information about show 3</div>
Wie kann ich dies mit jQuery erreichen?