【jQuery】知ってると便利！指定日を越えたら表示を変更する方法とは？

　サイトで、例えば◯月◯日を越えたら表示もしくは非表示にしたい…という場合があります。

コーポレートサイトだったら年末年始の営業日のお知らせとか、LPであれば期間限定販売の表示とか。

手作業で指定日時を越えたら編集する…というのもよいのですが、他の作業をしていると編集作業を忘れてしまう場合があります。

なので今回は、指定日時を越えたら表示を変更するjQueryを紹介したいと思います！

1. コンテンツの表示・非表示を設定するJavaScript

　まず、コンテンツの表示・非表示を設定するJavaScriptを紹介します！

今回は、指定日時まで表示するコンテンツを<div class=”before”>～</div>、指定日時を越えてから表示するコンテンツを<div class=”after”>～</div>とした上で以下のように記述します。

<script>
$( function() {
	'use strict';

	$.fn.day = function( date ) {

	var today = new Date();
	var day = new Date( date );

		if( today > day ){
			$('.before').hide();
			$('.after').show();
		}
		return this;
	};
});
</script>

上のコードの10～13行目で、指定日時を越えたら<div class=”before”>～</div>を非表示にし、<div class=”after”>～</div>を表示する…と設定しています。

なおjQueryライブラリを読み込んでいない場合は、下記のようにjQueryライブラリを読み込む記述をしましょう。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<script>
$( function() {
	'use strict';

	$.fn.day = function( date ) {

	var today = new Date();
	var day = new Date( date );

		if( today > day ){
			$('.before').hide();
			$('.after').show();
		}
		return this;
	};
});
</script>

ちなみにクラス名に関してはご自身で設定しやすいものに変更していただけたらと思います(^^)

2. CSSで指定日時以降表示するものを非表示にしておく

　次に、CSSで指定日時以降表示するものを非表示にしておく必要があります。
今回でいうと、<div class=”after”>～</div>が指定日時以降表示されるよう設定してあるので、以下のようにCSSを記述しておきます。

.after {
	display: none;
}

3. 指定日時を越えたら表示を変更するjQuery

　続いて、指定日時を越えたら表示を変更するためのjQueryを記述しましょう。

見本コードは下記になります。

<script>
$(function() {
  $('window').day( '20xx/xx/xx xx:xx' );
});
</script>

3行目の
.day(‘～～～～～’)
に関しては、表示切替日時を設定します。
例えば2020年1月1日の0時00分から表示を切り替えたい場合は、
.day(‘2020/01/01 00:00’)
と記述します。

このように設定することで、指定日時までは<div class=”before”>～</div>を表示し、指定日時以降は<div class=”after”>～</div>が表示されるようになります。

これをうまく使用すれば、指定日時以降はコンテンツを非表示にすることも可能になります(^-^)

まとめ

　以上が指定日時を越えたら表示を変更する方法でした。
これを使えば、指定日時を越えたらわざわざ作業する手間が省けますので、かなりオススメです！