Javascript: So markieren Sie automatisch das nächste Ereignisdatum

Jeden Samstag gibt es ein Ereignis. Ich habe es jetzt nur mit HTML und CSS programmiert, also keine database. Mein Problem ist, dass ich jetzt jede Woche die Liste anpassen muss (indem ich den Bereich auswähle, damit das nächste Ereignis hervorgehoben wird, damit die Besucher sehen können, welches Datum das nächste Ereignis ist).Javascript: So markieren Sie automatisch das nächste Ereignisdatum

Gibt es eine mögliche Lösung mit Javascript, um dies automatisch zu tun?

Beispiel: Heute ist der 9. Februar, also ist das Ereignis, das durch das span-Tag hervorgehoben wird, der 11. Februar.

Wenn der 12. Februar ist, wird das span-Tag am 11. Februar entfernt und am 18. Februar wird ein span-Tag hinzugefügt, damit es hervorgehoben wird.

(Ich lerne Javascript)

Dank für das mir helfen!

Ich habe die Antwort in den Code !! Danke, dass ihr mir hilft!

var $rootElem = document.getElementById('main-p'); 
 
    var $dateListEl = $rootElem.querySelectorAll('[data-date]'); 
 
    
 
    var currentDate = Date.now(); 
 

 
    for(var i = 0, len = $dateListEl.length; i < len; i++){ 
 

 

 
     var $li = $dateListEl[i]; 
 
     var date = $li.getAttribute('data-date'); 
 
     var ms = Date.parse(date); 
 

 
     if(ms > currentDate){ 
 
      var text = $li.textContent; $li.innerHTML = '<span class="main-s1-a1-p1-span2-green">' + text + '</span>' 
 
      break; 
 

 

 
     } 
 
    }

.main-p { 
 
     font-family: 'Helvetica light'; 
 
     font-size: 1.5em; 
 
     font-weight: 100; 
 
     line-height: 140%; 
 
     color: black; 
 
    } 
 
    .main-s1-a1-p1-span2-green { 
 
     font-weight: 800; 
 
     color: #93DD59; 
 
    }

<html> 
 
    
 
<body> 
 

 
<ul id="main-p" class=" main-s3-a1-s1-a2-ul-info main-p"> 
 

 
\t \t \t \t \t \t \t \t <li data-date="2017-02-5"> Zaterdag 4 februari</li> 
 
\t \t \t \t \t \t \t \t <li data-date="2017-02-12"> Zaterdag 11 februari</li> 
 
\t \t \t \t \t \t \t \t <li data-date="2017-02-19"> Zaterdag 18 februari</li> 
 
\t \t \t \t \t \t \t \t <li data-date="2017-02-26"> Zaterdag 25 februari</li> 
 
\t \t \t \t \t \t \t \t <li data-date="2017-03-5"> Zaterdag 4 maart: geen BS</li> 
 
\t \t \t \t \t \t \t \t <li data-date="2017-03-12"> Zaterdag 11 maart</li> 
 
\t \t \t \t \t \t \t \t <li data-date="2017-03-19"> Zaterdag 18 maart</li> 
 
\t \t \t \t \t \t \t \t <li data-date="2017-03-26"> Zaterdag 25 maart</li> 
 
\t \t \t \t \t \t \t \t <li data-date="2017-04-2"> Zaterdag 1 april</li> 
 
\t \t \t \t \t \t \t \t <li data-date="2017-04-9"> Zaterdag 8 : geen BS</li> 
 
\t \t \t \t \t \t \t \t <li data-date="2017-04-16"> Zaterdag 15 : geen BS</li> 
 
\t \t \t \t \t \t \t \t <li data-date="2017-04-23"> Zaterdag 22 april</li> 
 
\t \t \t \t \t \t \t \t <li data-date="2017-04-30"> Zaterdag 29 april</li> 
 
\t \t \t \t \t \t \t \t <li data-date="2017-05-7"> Zaterdag 6 mei</li> 
 
\t \t \t \t \t \t \t </ul> 
 
    
 
</body> 
 

 
</html>

Quelle

2017-01-16 Michiel Wils

Sind alle Daten einfach hart in die Seite codiert oder kommen sie tatsächlich aus einer Datenbank? – BSMP

erklären Sie zuerst, wie Sie das Listenelement jede Woche auswählen werden. Wenn du meinst, um welches Ereignis es sich handelt, ist das ziemlich ambig, wenn du keine Grundlage dafür hast, wie du das nächste Event auswählen kannst. – Roljhon

@Roljhon - Ich denke, sie wollen nur das Datum verwenden. – BSMP

HTML: <ul id="main-p" class="main-p"> <li data-date="2017-01-16">Zaterdag 16 January</li> <li data-date="2017-01-17">Zaterdag 17 January</li> <li data-date="2017-02-25">Zaterdag 25 februari</li> <li data-date="2017-03-18">Zaterdag 18 maart</li> <li data-date="2017-04-01">Zaterdag 1 april</li> </ul>

Js: `

var $rootElem = document.getElementById('main-p'); 
var $dateListEl = $rootElem.querySelectorAll('[data-date]'); 

var currentDate = Date.now(); 

for(var i = 0, len = $dateListEl.length; i < len; i++){ 

    var $li = $dateListEl[i]; 
    var date = $li.getAttribute('data-date'); 
    var ms = Date.parse(date); 

    if(ms > currentDate){ 
     $li.classList.add('main-s1-a1-p1-span2-green'); 
     break; 
    } 
}

Beispiel in Plunker https://plnkr.co/edit/3PEVLctBNFpg8DhG2dBU?p=preview

Quelle

2017-01-16 21:34:13 Smiranin

Cool, aber ich denke, das OP möchte das nächste Datum hervorheben, also muss es eine Logik geben, um herauszufinden, welches das ist (es kann nicht das aktuelle Datum sein). – RobG

Ich habe die Frage geändert. Ich hoffe, es ist jetzt besser erklärt. –

@ Michiel Ich verstehe dich, diese Implementierung ist nur und tut es. Wenn Sie den Text in den Bereich einschließen wollen, ersetzen Sie diese Zeile '$ li.classList.add ('head-s1-a1-p1-Span2-grün');' zu diesem 'var text = $ li.textContent; $ li.innerHTML = '' + text + '' ' – Smiranin

Wenn die generierte Seite enthält immer nur die Ereignisse zu kommen und Sie wollen einfach die erste li markieren, können Sie CSS wie first-of-type (keine Notwendigkeit für die Spanne) verwenden

.main-p > li:first-of-type { 
    font-weight: 800; 
    color: #93DD59; 
}

Fiddle

(Wenn die Liste auch Daten der Vergangenheit enthalten kann, würde die beste Lösung davon abhängen, wie die Seite aufgebaut ist und wie viel Einfluss Sie darauf ausüben können.)

Quelle

2017-01-17 10:51:26

Javascript: So markieren Sie automatisch das nächste Ereignisdatum

Antwort

Verwandte Themen