質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

5735閲覧

一週間たったら自動的にNewアイコンが消えるようにしたい!(jqery)

EmiShimizu

総合スコア9

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2017/03/15 07:22

html

1<p class="ttlNew"><!--<img src="/test/img/common/new.png" alt="new">--></p> 2 <p class="ttlDate"><span id="update">2017/3/7</span> Update</p>

<span id="update"></span>の値を日付データとして習得して、
(※この場合は2017/3/7)

その日付から一週間以内は

<p class="ttlNew"></p>に<!-- -->でかこまれている画像を表示 (※この場合は<img src="/test/img/common/new.png" alt="new">)

ということをしたいです。
よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/03/15 07:43

ご自身で書かれたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。
EmiShimizu

2017/03/16 02:18 編集

ご指摘ありがとうございます。次回質問する時は、分かりやすい質問文を書けるよう努めます!
guest

回答2

0

jQuery を使う前提で…

JavaScript

1function isNew(id) { 2 var dateStr = $("#"+id).text(); 3 var date = new Date(datestr); 4 var nowDate = new Date(); 5 date.SetHours(0); 6 date.SetMinutes(0); 7 date.SetSeconds(0); 8 date.SetMilliSeconds(0); 9 nowDate.SetHours(0); 10 nowDate.SetMinutes(0); 11 nowDate.SetSeconds(0); 12 nowDate.SetMilliSeconds(0); 13 // これでミリ秒単位で現在からどれだけ前の日かが分かる 14 var ellapse = nowDate.GetTime() - date.GetTime(); 15 // 7日をミリ秒単位で表して、差がそれ以下なら true を返す 16 return (ellapse <= 7 * 24 * 60 * 60 * 1000) 17}

こんな関数を定義しておいて、ロードしたときに

JavaScript

1$.ready(function() { 2 if (isNew("update")) { 3 $("p .ttlNew").html('<img src="/test/img/common/new.png" alt="new">'); 4 } 5});

とすれば、html が動的に差し込まれますかね。
img 自体は常に書いておいて、class をいじって hidden にするとかでもよさそうですが。

投稿2017/03/15 08:10

tacsheaven

総合スコア13703

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

EmiShimizu

2017/03/16 02:07

早速のご回答ありがとうございました。お返事が遅くなり、大変申し訳ございませんでした。 検証させていただきましたところ、私の技量では動かず、動作しない原因を突き止めることができませんでした。おそらく、私の問題だと思います。すみません! ご回答いただきまして、とても嬉しかったです。感謝申し上げます!
guest

0

ベストアンサー

#サンプル

html

1<!doctype html> 2<html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>sample</title> 6 </head> 7 <body> 8 <p class="ttlDate" data-date="2017-03-15">コンテンツ</p> 9 <p class="ttlDate" data-date="2017-03-10">コンテンツ</p> 10 <p class="ttlDate" data-date="2017-02-25">コンテンツ</p> 11 <script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script> 12 <script type="text/javascript"> 13 $(function () { 14 $('.ttlDate').each(function (i, obj) { 15 var date = $(this).attr('data-date'); 16 17 // 更新日 18 var d = new Date(); 19 d.setFullYear(date.split('-')[0]); 20 d.setMonth(date.split('-')[1] - 1); 21 d.setDate(date.split('-')[2]); 22 23 // 7日後 24 d.setDate(d.getDate() + 7); 25 if (d > new Date()) { 26 var star = $('<span>'); 27 star.addClass('star').text('update'); 28 $(this).prepend(star); 29 } 30 }); 31 }); 32 </script> 33 </body> 34</html>

投稿2017/03/15 07:55

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

EmiShimizu

2017/03/15 08:11

早速のご回答ありがとうございます!! すぐにでもサーバにアップして、検証したいのですが、急な件で外出しなければならず、検証できなくなってしまいました。せっかくお答えいただいたのに申し訳ございません。要件が済み次第、すぐ検証いたします。取り急ぎ、お礼までとさせてください。 本当にありがとうございました。
EmiShimizu

2017/03/16 01:39

検証が遅くなり、大変失礼いたしました。 動きました!!!数時間悩んだことが解決しました。ありがとうございます。 [data-]という記述方法があるのですね。知りませんでした。勉強になりました!
EmiShimizu

2017/03/16 02:09

知識のない私にでも分かりやすいシンプルなコードで、動作も確認できました。 ベストアンサーにさせていただきました。誠にありがとうございました!
退会済みユーザー

退会済みユーザー

2017/03/16 02:12

どういたしまして。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問