![MARKLEAPS[マークリープス]](https://markleaps.com/blog/wp-content/themes/mkl/images/00_logo.png){kind=logo}
期間限定でコンテンツの表示/非表示を切り替えるjQuery
MARKLEAPS
期間限定でコンテンツの表示/非表示を切り替えるjQueryを見つけたのでメモ。
実装方法
・jQueryライブラリを読み込む
|
1 |
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script> |
・以下のコードをjsファイルとして読み込む
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
$(document).ready(function() { $(".view_timer").each(function(index, target) { var startDate = $(this).attr("data-start-date"); var endDate = $(this).attr("data-end-date"); var nowDate = new Date(); if (startDate) { startDate = new Date(startDate); } else { startDate = nowDate; } if (endDate) { endDate = new Date(endDate); } if (startDate <= nowDate && (!endDate || nowDate <= endDate)) { $(this).show(); } else { $(this).hide(); } }); }); |
view_timer.js等の名前を付けて、html内にスクリプトを読み込みます。
|
1 |
<script src="js/view_timer.js"></script> |
html内に期間限定で表示/非表示する内容を記述
①7月22日から表示
|
1 2 3 |
<span class="view_timer" data-start-date="2022/7/22 0:00"> 期間限定で表示させたい内容 </span> |
data-start-date で表示開始日時を指定
②7月22日まで表示
|
1 2 3 |
<span class="view_timer" data-end-date="2022/7/22 00:00"> 期間限定で表示させたい内容 </span> |
data-end-date で表示終了日時を指定
③7月22日～7月29日まで表示
|
1 2 3 |
<span class="view_timer" data-start-date="2022/7/22 0:00" data-end-date="2022/7/29 00:00"> 期間限定で表示させたい内容 </span> |
data-start-date と data-end-date を合わせて記述
