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

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

ただいまの
回答率

87.94%

jQuery 特定の要素を選択したい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 236
退会済みユーザー

退会済みユーザー

ポートフォリオのWorks欄(成果物紹介)のところで、画像のキャプションを表示させたいです。
ですが、jQueryでキャプション背景用のdiv要素を追加して、そのdiv要素を操作しようとすると、
Works欄以外のセクション(AboutだったりContact)も<div class="container"> </div>で囲っている為、
そのdivたちも反応してしまい、うまく動作しないです。
jQueryで特定のdivに対して操作できないと試行錯誤したのですが、よく分からなかったので、
解決策がありましたらアドバイスの方よろしくお願い致します。

 <!-- works -->
    <section class="works" id="works">
      <div class="container">
        <h1 class="section-title">WORKS</h1>
        <h2 class="section-subtitle"><span></span>制作物紹介<span></span></h2>

        <ul class="works-list animationTarget">
          <li class="works-item">
            <img src="img/cresta_top.png" alt="模写コーディング">
          </li>
          <li class="works-item">
            <img src="img/isara_top.png" alt="模写コーディング">
          </li>
          <li class="works-item">
            <img src="" alt="模写コーディング">
          </li>
          <li class="works-item">
            <img src="" alt="作品の画像です">
          </li>
          <li class="works-item">
            <img src="" alt="作品の画像です">
          </li>
          <li class="works-item">
            <img src="" alt="作品の画像です">
          </li>
        </ul>
      </div>
    </section>
    <!-- //works -->
/* ========= works ========= */
.works {

  &-list {
    opacity: 0;
    transition: 1s;
    transform: translateY(50px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;

    &.show {
      opacity: 1;
      transform: none;
    }
  }

  &-item {
    position: relative;
    width: calc(85%/3);
    height: 200px;
    margin-bottom: 50px;
    color: #ffffff;

    img {
      display: block;
      width: 100%;
      height: 100%;
      box-shadow: 8px 8px 8px #555;
      cursor: pointer;
      margin-bottom: 20px;
    }
  }

  div {
    position:absolute;
    display:none;
    width:100%;
    height:100%;
    padding:20px;
    background:rgba(17, 179, 179, .7);
    top:0;
    left:0;
  }

  p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% ,-50%);
  }
}
$(function () {
  // li要素の最後にdiv要素を追加
  $(".works-item").append("<div></div>");

  // div要素内に画像のキャプションを追加
  $("div").each(function () {
    $(this).html("<p>" + $(this).parent().children("img").attr("alt") + "</p>");
  });

  // li要素をマウスオーバー
  $("li").on('hover', function () {
    // キャプション部分の表示:フェードイン
    $(this).children("div").stop().fadeIn(300);

    // キャプションのテキスト位置:10pxから0pxへ移動
    $(this).children("div").children("p").stop().animate({
      "top": 0
    }, 300);
  }, function () {
    // キャプション部分の非表示:フェードアウト
    $(this).children("div").stop().fadeOut(300);

    // キャプションのテキスト位置:0pxから10pxへ移動
    $(this).children("div").children("p").stop().animate({
      "top": "10px"
    }, 300);
  });
});
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • m.ts10806

    2020/10/01 20:34

    「SCSS」をタグに追加するか、コンパイル後のCSSを提示されたほうが良いかと思います。

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2020/10/01 21:26

    タグを追加させていただきました。

    キャンセル

回答 1

checkベストアンサー

0

<section class="works" id="works">の子孫要素に限定するなら、
#worksなどをセレクター部分に追記してみてください。

参考ページ
https://www.jquerystudy.info/reference/selectors/descendant.html

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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