Webページにおいて、特定の日時に情報を公開したい場合や、期間限定のコンテンツを表示したい場合があります。この記事では、そんな要望を簡単に実現できるjQueryを使用した方法を紹介します。
必要なライブラリの読み込み
まずは、jQueryのライブラリをHTMLの<head>タグ内に追加します。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>HTMLの準備
次に、表示・非表示を切り替えたい要素に対して、一意のIDまたはクラスを指定します。
<div id="targetElement">これは指定した日時に表示・非表示を切り替える要素です。</div>jQueryでの実装
指定した日時が来たら、表示・非表示を切り替える処理を以下のように実装します。
$(document).ready(function(){
// 指定した日時を設定 (例: 2023年8月10日 15:00:00)
const targetDate = new Date(2023, 7, 10, 15, 0, 0); // 月は0から始まるので、8月は7とする
// 現在の日時を取得
const currentDate = new Date();
if(currentDate >= targetDate) {
// 指定日時を過ぎていたら要素を表示
$("#targetElement").show();
} else {
// 指定日時より前だったら要素を非表示
$("#targetElement").hide();
}
});上記のコードでは、指定した日時が現在の日時を超えていれば、#targetElementの要素を表示し、超えていなければ非表示にします。
これで、指定した日時に要素の表示・非表示を切り替えることができます。必要に応じて日時や要素のIDなどを変更してください。
応用編 異なる日時で複数要素を管理する方法
特定のイベントやキャンペーンに合わせて、異なる日時で複数の要素を表示・非表示にしたい場面があるかと思います。そこで、効率的にこれを実現する方法をご紹介します。
複数要素のHTMLの準備
まずは、表示・非表示を切り替えたい要素を準備します。それぞれの要素に一意のIDを割り当てるのではなく、共通のクラスを使用して管理します。
<div class="toggleElement" data-toggle-date="2023-08-15 12:00:00">15日のイベント情報</div>
<div class="toggleElement" data-toggle-date="2023-08-20 15:00:00">20日のキャンペーン詳細</div>この例では、data-toggle-dateというカスタムデータ属性を使用して、それぞれの要素に表示させたい日時を設定しています。
jQueryでの実装
次に、jQueryを使用してこれらの要素を一括で処理します。
$(document).ready(function(){
const currentDate = new Date();
$(".toggleElement").each(function(){
const elementDateStr = $(this).data("toggle-date");
const [date, time] = elementDateStr.split(" ");
const [year, month, day] = date.split("-");
const [hour, minute, second] = time.split(":");
const elementDate = new Date(year, month-1, day, hour, minute, second);
if(currentDate >= elementDate) {
$(this).show();
} else {
$(this).hide();
}
});
});このコードでは、.toggleElementというクラスを持つすべての要素をループ処理しています。それぞれの要素のdata-toggle-dateを取得し、現在の日時との比較を行い、適切に表示・非表示を切り替えます。
この応用編の方法を使用すれば、さまざまな日時で複数の要素を効率的に管理することができます。特にイベントやキャンペーンなどの情報をタイムリーに表示させる際に役立ちます。
まとめと注意点
このテクニックを使用することで、ウェブページのコンテンツをよりダイナミックに、かつタイムリーに管理することができます。しかし、JavaScriptやjQueryが無効な状況下では機能しない点や、時差の考慮などの注意点も忘れずに。
