期間限定でコンテンツの表示/非表示を切り替えるjQuery

MARKLEAPS

2022.07.22

期間限定でコンテンツの表示/非表示を切り替えるjQueryを見つけたのでメモ。

実装方法

・jQueryライブラリを読み込む

<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

1	<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

・以下のコードをjsファイルとして読み込む

$(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();
    }
  });
});

$(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内にスクリプトを読み込みます。

<script src="js/view_timer.js"></script>

1	<script src="js/view_timer.js"></script>

html内に期間限定で表示/非表示する内容を記述

①7月22日から表示

<span class="view_timer" data-start-date="2022/7/22 0:00">
期間限定で表示させたい内容
</span>

期間限定で表示させたい内容

data-start-date で表示開始日時を指定

②7月22日まで表示

<span class="view_timer" data-end-date="2022/7/22 00:00">
期間限定で表示させたい内容
</span>

期間限定で表示させたい内容

data-end-date で表示終了日時を指定

③7月22日～7月29日まで表示

<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 を合わせて記述

よく読まれている関連記事

タブ切り替えスクリプト「yetii.js」の使い方