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

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

ただいまの
回答率

90.34%

  • jQuery

    7110questions

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

  • CSS

    6206questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    4304questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery 今日の日付の時だけ画像を表示したいのですが方法がわからず困っております。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 225

spantonn

score 5

失礼します。

現在ブログの記事が今日の日付だった場合に、
その記事に「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>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2017/09/29 17:28

    質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを、出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。

    キャンセル

  • spantonn

    2017/09/29 17:30

    ありがとうございます。 修正を致します。

    キャンセル

  • kei344

    2017/09/29 17:47

    テンプレートの記述ではなく、出力されたHTML(ブラウザで「ページのソースを表示」)を質問文に追記いただけませんか?

    キャンセル

  • spantonn

    2017/09/29 19:03

    すいませんご返事が遅れてしましました、ブラウザでのソースを追加いたしました。

    キャンセル

回答 1

checkベストアンサー

0

まず、下記部分がHTMLとしておかしい部分です。タグは入れ子にできません。<div><a></div><div></a></div> こういう構造は文法違反です。ブラウザは表示を優先するので、崩れたHTMLを崩れたまま何とか表示しようとしますが、元々想定していた構造にはならない場合が多いです。

            <div class="image2">
              <a href="<$ArticlePermalink$>" itemprop="url"><img src="<$ArticleCoverImage$>" />
            </div>
          </div>
          <!--記事タイトル-->
          <div class="news_p">
            <p><$ArticleTitle ESCAPE$></p></a>
          </div>

で、日付を比較するならDateオブジェクトで比較するほうが良いでしょう。

if ( now.getTime() - Date.parse( news_time.trim().replace( /\./g,'-' ) ) < 24*60*60*1000 ) {

} else {

}

動くサンプル:https://jsfiddle.net/uwsc6480/


【String.prototype.trim() - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/trim

【String.prototype.replace() - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replace

【Date.parse() - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/parse

【JavaScript の Date は罠が多すぎる - Qiita】
https://qiita.com/labocho/items/5fbaa0491b67221419b4

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/10/02 12:11

    ご返事が遅れてしまい、すいません。

    勉強になります、ありがとうございます。
    今回の事で自分のレベルが分かったので一から勉強を始めし直そうと思います。

    ありがとうございます。

    キャンセル

  • 2017/10/02 14:51

    > タグは入れ子にできません。
    内容モデルで違反にならない限りは入れ子(ネスト)に出来ます(例えば、<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

    キャンセル

  • 2017/10/02 15:04

    > 「てれこ」でしょうか。
    指摘の通りです。あぁ、つい「入れ子」って書いてしまうんですよね。ありがとうございます。

    > 「今日の日付」に限定するのであれば、「0以上」の条件を加える必要があります。
    補足ありがとうございます。質問文を読み込めていませんでした。

    キャンセル

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

  • ただいまの回答率 90.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • jQuery

    7110questions

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

  • CSS

    6206questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    4304questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。