teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

JSの処理の修正も追記

2020/01/21 06:33

投稿

miyabi_pudding
miyabi_pudding

スコア9559

answer CHANGED
@@ -15,4 +15,49 @@
15
15
  <mt:pages limit="1" sort_by="modified_on"><$mt:PageModifiedDate$><span class="new"></span></mt:pages>
16
16
  ```
17
17
 
18
- ようは、`lastn`によって、違うやつの更新日が出てしまってたわけですね。
18
+ ようは、`lastn`によって、違うやつの更新日が出てしまってたわけですね。
19
+
20
+ さて、JS取得に関してですが、日付比較の処理などの勉強をしっかりされたほうがいいかと思います。
21
+ 大事なのは、フォーマットです。
22
+ 上記の状態で、フォーマット指定をせず、日付を出力すると、日本においては、
23
+ `2020年1月21日 15時`と、そんな感じで出力されるかと思います。
24
+ しかしそれでは、
25
+ `time = $(this).text().split(":");`で正しく取得なんてできはしません。
26
+ (`split`は第一引数の文字列区切りの配列を返すメソッド。今回のままでは、`:`なんてどこにも入っていないのでうまくいかない)
27
+ よって、下記のようにする必要があります。
28
+
29
+ ```html
30
+ <!-- 他の部分は省略 -->
31
+ <!-- 本来は、:区切りは、時:分:秒のみにすべきで、日付は、年/月/日 or 年-月-日が望ましい。(世界標準に準拠するため) -->
32
+ <!-- また、取得用のタグに日付が入っておらず取得できない状態だったので、取得できるように若干修正 -->
33
+ <mt:pages limit="1" sort_by="modified_on">
34
+ <!-- span.newの中に入ってなかったので、そりゃ取得できない。修正 -->
35
+ <span class="new"><$mt:PageModifiedDate format="%Y:%m:%d:%H:%M:%S"$></span></mt:pages>
36
+
37
+ <script type="text/javascript">
38
+ // passage time
39
+ var pass = 24;
40
+
41
+ // display content
42
+ var content = 'NEW!';
43
+
44
+ var currentDate = new Date();
45
+ $(function(){
46
+ $('.new').each(function(){
47
+ // 文字列配列取得なので、数値が入った配列に、メソッドチェーンにて修正
48
+ // 日付の出力を、全て:区切りにしているため、split(':')で取得できるようになっている。
49
+ const time = $(this).text().split(":").map(v => Number(v));
50
+ // 数値配列になっているため、time[1] - 1の計算が正しく行われる
51
+ const entryDate = new Date(time[0], time[1]-1, time[2], time[3], time[4], time[5]);
52
+ let now = (entryDate.getTime() - currentDate.getTime())/(60*60*1000);
53
+ now = Math.ceil(now);
54
+ // -先頭にいれていたのはなぜ?日付の差が24時間以内との比較なら下記で十分
55
+ if(now <= pass){
56
+ $(this).html(content).css('display', 'inline');
57
+ }
58
+ });
59
+ });
60
+ </script>
61
+ ```
62
+ 日付処理というか、JavaScriptの基礎がなっていなかったようにお見受けしますので、
63
+ ご自身のコードとじっくり見比べ、何が違うのかしっかりと勉強してください。