Javascript：自動的に次のイベントの日付を強調する方法

毎週土曜日にイベントがあります。私は今、HTMLとCSSだけを使用してプログラムしましたので、日付ベースはありません。私の問題は、毎週リストを調整する必要があることです（スパンを置き換えることで、次のイベントがどの日付になるかを知ることができます）。Javascript：自動的に次のイベントの日付を強調する方法

自動的にこれを行うにはJavascriptで解決策がありますか？

例：今日は2月9日ですので、スパンタグで強調表示されているイベントは2月11日です。

2月12日のスパンタグは2月11日に削除され、2月18日にはliタグが追加され、強調表示されます。

（私はJavaScriptを学んでいます）

私を助けてくれてありがとう！

私はコードに答えを入れました！私を助けてくれてありがとう！

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>

出典

2017-01-16 Michiel Wils

すべての日付はちょうどページにハードコードされているのですか、実際にデータベースから来ていますか？ – BSMP

まずは、毎週どのようにリストアイテムを選択するのかを説明します。どんなイベントが起きるのかということを意味するならば、次のイベントをどのように選択するかの根拠がないなら、それはかなりあいまいです。 – Roljhon

@Roljhon - 彼らは単に日付を使いたいと思う。 – 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：Plunkerで '

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; 
    } 
}

例

出典

2017-01-16 21:34:13 Smiranin

クールだけど、OPは次の日付を強調したいと思うので、どれが現時点ではないかもしれないかを知るロジックが必要です。 – RobG

私は質問を変更しました。ここで説明するほうがいいと思います。 –

@ Michiel私はあなたを理解しています。この実装はちょうどあります。スパンにテキストをラップする必要がある場合は、この行を '$ li.classList.add（ 'head-s1-a1-p1-Span2-green'）;'これに置き換えます。var text = $ li.textContent; $ li.innerHTML = '' + text + '' – Smiranin

は、生成されたページは常に来てイベントのみが含まれている場合、あなたはあなたがfirst-of-typeなどのCSS（スパンは必要ありません）

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

Fiddle

を使用することができ、単に最初 liを強調したいです

（リストに過去の日付が含まれている場合は、ページがどのように構築され、どのように影響を与えるかによって最適な解決策が決まります）

出典

2017-01-17 10:51:26

Javascript：自動的に次のイベントの日付を強調する方法

答えて

関連する問題