読者です 読者をやめる 読者になる 読者になる

CODE-LIFE│コーディング・プログラミングのメモブログ

WEB製作の仕事を始めたMaruのhtml・CSS・jsメモブログ

日時指定で要素の表示と非表示を切り替えるjQueryが超絶便利

今週セールページを用意するときにタイムセールの枠を作ることになったのですが、カウントダウンタイマーを自動で表示して終わったら非表示にできないかとscriptを探していたらこんなものを見つけました。

qiita.com

これがすごく便利!

このscriptでできること

  • 指定した日時になったら要素を表示する
  • 指定した日時になったら要素を非表示にする
  • 指定した期間だけ要素を表示する

このscriptの利点

  • jQueryなので記述が簡単に済む
  • 日時指定が要素のタグ内に記述できるので管理が簡単

 

導入方法

1.jQueryライブラリを読み込む

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.2/jquery.min.js"></script>

<head>~</head>内に記述。

 

2.下記scriptを記述もしくは読み込む

直接html内に記述する場合は

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

view_timer.jsなどの名前で保存。

html内に<script src="js/view_timer.js"></script>として読み込む。

 

3.表示/非表示を切り替えたい要素をspanで囲んで日時指定

指定方法は3パターン

記入例

指定した時間まで表示する(2/15 0:00 から非表示にする)

<span class="view_timer" data-end-date="2016/2/15 0:00"></span>

指定した時間までは非表示(2/15 0:00 から表示する)

<span class="view_timer" data-start-date="2016/2/15 0:00"></span>

指定した期間だけ表示する(2/15 0:00 ~ 2/16 0:00 の間だけ表示する)

<span class="view_timer" data-start-date="2016/2/15 0:00" data-end-date="2016/2/16 0:00"></span>

以上で設定は完了。 これで時限式に要素の表示と非表示を切り替えることができます。

しかもタグに個別で直接設定できるため複数のタイマーの管理が分かりやすい。

 

あとがき

今後のセールページ製作には欠かせないscriptになりそうです。

タイムセールに使ったり、休みの日の自動更新につかったり、まぁscriptである以上はRMSのページなんかでは使えないんですけどね。