Q&A
質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを、出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。
失礼します。
現在ブログの記事が今日の日付だった場合に、
その記事に「NEW」の画像を表示する機能を付ける
作業を行なっています。
調べながらやっては見たのですが、
動かず、行き詰まってしまいました。
大変申し訳ないのですが、
詳しい方にアドバイスをいただきたいです。
htmlの
class="time"の日付が今日の時のみ
span class="new"の画像を表示させたいです。
宜しくお願い致します。
【LD】 <IndexArticlesLoop> <li class="time_wrap"> <div class="news_img"> <!--記事の見出し--> <div class="image2"> <a href="<$ArticlePermalink$>" itemprop="url"><img src="<$ArticleCoverImage$>" /> </div> </div> <!--記事タイトル--> <div class="news_p"> <p><$ArticleTitle ESCAPE$></p></a> </div> <!--更新日--> <span class="new"><!--new--> <img src= alt=""> </span><!--/new--> <p class="time"> <$ArticleDateYear$>.<$ArticleDateMonth$>.<$ArticleDateDay$> </p> <!--カテゴリー--> <a href="<$ArticleCategory2Url$>"><span class="right"><$ArticleCategory2$></span></a> <a href="<$ArticleCategory1Url$>"><span class="right"><$ArticleCategory1$></span></a> </li> </IndexArticlesLoop> </div>
【CSS】 .news .whats_all { margin: 39px 0 36px 3%; } .whats_all img { width: 213px; margin-top: 10px; } .date_display { position: absolute; top: 52px; left: 594px; color: #d9ebf5; z-index: -1; font-family: "Futura",serif; } .date_display li { float: left; } li p.update { margin-top: -1px; margin-right: -5px; line-height: 1.5em; font-size: 25.02px; font-weight: 200; } li p.month { margin-top: 4px; margin-left: 12px; font-size: 27.48px;; font-weight: 600; } li p.slash { margin-top: -15px; margin-right: 7px; margin-left: -20px; } li p.date { margin-top: -16px; margin-left: -18px; font-size: 93px; font-weight: 300; letter-spacing: -6px; } .news { width: 900px; margin-left: -27px; float: left; position: relative; } .news a { text-decoration: none; color: #000; } .news_img { max-width: 261px; max-height: 146.55px; min-width: 261px; min-height: 146.55px; overflow: hidden; } .image2{ position: relative; width: 100%; padding-top: 75%; overflow: hidden; margin: 0 auto; } .image2 img{ position: absolute; top: 38%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width: 150%; max-height: 150%; } .news .text li { width: 261px; min-height: 284px; max-height: 284px; float: left; border-bottom: solid 1px #e5e5e5; padding-bottom: 4px; margin-bottom: 41px; margin-left: 3%; text-decoration: none; list-style:none; } .news_p { height: 65px; overflow: hidden; } .news .text p { margin-top: 15px; line-height: 1.5em; font-size: 14px; } .time_wrap span.new{ display: none; float: left; margin: 16px 10px 4px 0; width: 47px; } .news p.time { float: left; margin: 19px 0px 25px 0; color: #555555; font-size: 14px; } .news .right { float: right; margin: 24px 0 25px 0; color: #999999; font-size: 12px; }
【js】 <script type="text/javascript"> $(function(){ // 今日の日付情報を取得し変数dTodayに格納する var now = new Date(); var yyyymmdd = now.getFullYear()+ ( "0"+( now.getMonth()+1 ) ).slice(-2)+ ( "0"+now.getDate() ).slice(-2); $('.time_wrap').each(function(){ var news_time = $(this).find(".time").text(); str_first = news_time.substring(0, 4); str_mdl = news_time.substring(5, 6); str_btm = news_time.substring(7, 9); news_time02 = str_first + "0" +str_mdl + str_btm; if (yyyymmdd == news_time02 ) { $(this).find("span").css('display','block'); } else { } }); }); </script>
htmlをブラウザで表示したものになります。
絶対パスに関しては、一部省略しております。
<li class="time_wrap"> <div class="news_img"> <!--記事の見出し--> <div class="image2"> <a href="http://blog.livedoor.jp/" itemprop="url"><img src="http://livedoor.blogimg.jp/ > </div> </div> <!--記事タイトル--> <div class="news_p"> <p>test</p></a> </div> <!--更新日--> <span class="new"><!--new--> <img src="http://blog.livedoor.jp/> </span><!--/new--> <p class="time"> 2017.9.29 </p> <!--カテゴリー--> <a href=""><span class="right"></span></a> <a href=""><span class="right"></span></a> </li> </script>
回答1件
0
ベストアンサー
まず、下記部分がHTMLとしておかしい部分です。タグは入れ子にできません。<div><a></div><div></a></div> こういう構造は文法違反です。ブラウザは表示を優先するので、崩れたHTMLを崩れたまま何とか表示しようとしますが、元々想定していた構造にはならない場合が多いです。
HTML
1 <div class="image2"> 2 <a href="<$ArticlePermalink$>" itemprop="url"><img src="<$ArticleCoverImage$>" /> 3 </div> 4 </div> 5 <!--記事タイトル--> 6 <div class="news_p"> 7 <p><$ArticleTitle ESCAPE$></p></a> 8 </div>
で、日付を比較するならDateオブジェクトで比較するほうが良いでしょう。
JavaScript
1if ( now.getTime() - Date.parse( news_time.trim().replace( /./g,'-' ) ) < 24*60*60*1000 ) { 2 3} else { 4 5} 6```**動くサンプル：**[https://jsfiddle.net/uwsc6480/](https://jsfiddle.net/uwsc6480/) 7 8--- 9 10【String.prototype.trim() - JavaScript | MDN】 11[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/trim](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/trim) 12 13【String.prototype.replace() - JavaScript | MDN】 14[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace) 15 16【Date.parse() - JavaScript | MDN】 17[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/parse](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/parse) 18 19【JavaScript の Date は罠が多すぎる - Qiita】 20[https://qiita.com/labocho/items/5fbaa0491b67221419b4](https://qiita.com/labocho/items/5fbaa0491b67221419b4)
投稿2017/09/29 12:49
総合スコア69407
ご返事が遅れてしまい、すいません。
勉強になります、ありがとうございます。
今回の事で自分のレベルが分かったので一から勉強を始めし直そうと思います。
ありがとうございます。
> タグは入れ子にできません。
内容モデルで違反にならない限りは入れ子(ネスト)に出来ます(例えば、<div><div></div></div> はOK、<a><a></a></a> はNG)。
適切な表現かわかりませんが、仰りたかったのは「てれこ」でしょうか。
> if ( now.getTime() - Date.parse( news_time.trim().replace( /./g,'-' ) ) < 24*60*60*1000 ) {
この条件式は「対象の日付」が今日以降だった場合に true を返しますので、「未来の日付」が指定された場合も成立してしまいます。
「今日の日付」に限定するのであれば、「0以上」の条件を加える必要があります。
「閏秒の日付」は一日の時間(ミリ秒)が 24*60*60*1000 + 1000 になってずれるのではと思いましたが、JavaScript はそこまで賢くないようです。
new Date(2017, 0, 1, 8, 59, 60); // Sun Jan 01 2017 09:00:00 GMT+0900 (東京 (標準時))
new Date('2017-01-01T08:59:60.000+09:00'); // Invalid Date
> 「てれこ」でしょうか。
指摘の通りです。あぁ、つい「入れ子」って書いてしまうんですよね。ありがとうございます。
> 「今日の日付」に限定するのであれば、「0以上」の条件を加える必要があります。
補足ありがとうございます。質問文を読み込めていませんでした。
あなたの回答
tips
プレビュー
