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

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

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

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

1271閲覧

新着マークの表示について

kirin311

総合スコア53

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2018/05/15 02:16

編集2018/05/15 02:39

前提・実現したいこと

自動でNEWマーク表示したい

発生している問題・エラーメッセージ

エラー表示自体はないです。
ただ表示されないです、その原因がわからないので・・・

該当のソースコード

もとのデータ内容(response.items[0].dateの中身)は、
2018-05-14T16:02:53+09:00
として

JQuery

1 var data_result = response.items[0].date.match(/(\d+)-(\d+)-(\d+)\D+(\d{2}):(\d{2}):(\d{2})/); 2 console.log(data_result); 3 4 //新着の表示 5 $('time').each(function(){ 6 // 現在日時 7 var current = new Date(); 8 // 14日(2週間)前のミリ秒 9 var range_ms = current.getTime() - (2 * 24 * 60 * 60 * 1000); 10 11 // 更新日時 12 // new Date($(this).attr('datetime')); 13 var modified = new Date($(this).attr('datetime')); 14 // 更新日時のミリ秒 15 //var modified_ms = modified.getTime(); 16 17 if (range_ms < modified){ 18 $(this).after('<span style="color: red">新着!</span>'); 19 } 20 }); 21 22jQuery('#test').append('<time datetime="'+data_result[1]+"-"+data_result[2]+"-"+data_result[3].toString()+'">'+data_result[1]+"-"+data_result[2]+"-"+data_result[3]+'</time><br>');

HTML

1<div id="test"></div>

試したこと

data_result[1].toString()など入力してみましたが、表示されませんでした。

補足情報(FW/ツールのバージョンなど)

MovableTypeの新着記事に新着マークの取り付けです。(DataAPI使用)

何かアドバイス頂けれたらと思いますのでよろしくお願いします。

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

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

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

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

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

guest

回答2

0

ベストアンサー

js

1 var data_result = response.items[0].date.match(/(\d+)-(\d+)-(\d+)\D+(\d{2}):(\d{2}):(\d{2})/); 2 console.log(data_result); 3 4jQuery('#test').append('<time datetime="'+data_result[1]+"-"+data_result[2]+"-"+data_result[3].toString()+'">'+data_result[1]+"-"+data_result[2]+"-"+data_result[3]+'</time><br>'); 5 6 //新着の表示 7 $('time').each(function(){ 8 // 現在日時 9 var current = new Date(); 10 // 14日(2週間)前のミリ秒 11 var range_ms = current.getTime() - (2 * 24 * 60 * 60 * 1000); 12 13 // 更新日時 14 // new Date($(this).attr('datetime')); 15 var modified = new Date($(this).attr('datetime')); 16 // 更新日時のミリ秒 17 //var modified_ms = modified.getTime(); 18 19 if (range_ms < modified){ 20 $(this).after('<span style="color: red">新着!</span>'); 21 } 22 });

投稿2018/05/15 02:43

kei344

総合スコア69364

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

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

kirin311

2018/05/15 02:56

ソースコード入力ありがとうございます。 しなしながら、こちらを入れましても日付自体は表示されますが新着!マークが表示されないです・・
kirin311

2018/05/15 04:23

部分、部分コピペしただけでしたので新着マークが表示されませんでしたが、mts10806様の説明で位置の問題と納得できましたのでこちらをベストアンサーとさせていただきます。
guest

0

modified_ms は何のための取得したんでしょう・・・

js

1 2if (range_ms < modified_ms){ 3

投稿2018/05/15 02:30

m.ts10806

総合スコア80765

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

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

kirin311

2018/05/15 02:38

あああ、すみません。とあるサイトを参考にコピペで行って(あんまり変わってませんが)多少手を加えただけですので。。 本来なら 修正前(range_ms < modified_ms){ ですが、 修正後(range_ms < modified){ を使っておりますので。
m.ts10806

2018/05/15 02:42

でもrange_ms はミリ秒でmodifiedはDateオブジェクトそのものなので型が違います。 型をあわせないと比較はできませんよ。 今のやり方だと価格と商品をどっちが大きいかと比べているようなものです。
kirin311

2018/05/15 02:53

えーとmodified を編集するということでしょうか?具体的には、検討がつきませんが・・
m.ts10806

2018/05/15 03:55

参考にしたサイトおよび私の回答ではいけない理由を教えてください。 私は型が違うものは比較しても土俵が違うので正しく比較できない と言っています。 JavaScriptはJavaではないので型が違うよとは教えてくれません。
kirin311

2018/05/15 04:10 編集

理解が乏しくてすみません。 私の考えとしてmts10806様の回答で型を合わせる、土俵を同じようにするということは、modified を編集すべきなのかなと思っておりました。
kirin311

2018/05/15 04:10 編集

多分いけない理由は、 修正前に戻していた場合の動作ですが、HTMLのほうに <time datetime="2018-05-15">2018-05-15</time> と入力していた場合は、正常に動作(【新着!】表示)いたしますが、 javascriptのほうの場合、 jQuery('#test').appendの部分ですが、動作しません(【新着!】表示しない)ので・・・
kirin311

2018/05/15 04:08

これらの違いがよくわからなくて困っているという形です
m.ts10806

2018/05/15 04:12

modified → modified_ms と変数名を変更する、コメントアウトした var modified_ms = modified.getTime();のコメントをはずす、だけで良いかと。 ただMovableTypeって使ったことないけどCMSですよね? HTMLレンダリング後に後付するのではなく、表示時になんとかできなくもないと思います。 使ったことがないので詳しくは分かりませんが、PHP,Perlでサーバーサイドが動いてるので データ取得→HTML表示の箇所をカスタマイズできればいけそうです。
m.ts10806

2018/05/15 04:15 編集

ああ、だから、kei344さんの回答ですね。今理解しました。 (range_ms < modified_ms) のままで、 jQuery('#test').append()の部分をJabaScriptソースの冒頭に持ってきてください。 上から順番に処理していくので、 今の状態だと、timeタグが追加される前にeach()が動いている状態となっています。
kirin311

2018/05/15 04:18

なんと、そういうことでありましたが・・ 位置のこと気にしておりませんでした・・ ありがとうございます
m.ts10806

2018/05/15 04:18

私も最初kei344さんの回答の意味が理解できていませんでした。 よくよく考えたらそういうことでした;
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問