クリックした画像と、テキストをモーダルに表示させたい（jQuery、JavaScript）

Question

モーダルにテキストも表示させたい。
現在作成中のモーダル（CodePenリンク先）
クリックした画像にあるテキストを表示させたいです。

クリックした画像のテキストを取得することができず、全てのテキストを取得してしまいます。
altであればvar cap = $(this).attr("alt")でうまく取得できたのですが、、

画像をクリックした時$(".hoge-item .img-box >img").click(function () ではなく、li.hoge-itemをクリックした時などに変更が必要なのでしょうか。

基礎的な質問で恐縮ですが、ヒントや方法などでも教えていただけると助かります。
よろしくお願いします。

<div class="container">
  <ul class="hoge-list">
    <li class="hoge-item">
      <div class="img-box">
        <img src="https://picsum.photos/500/500" alt="altの内容01">
      </div>
      <div class="txt-box">
        <p class="ttl">タイトル01</p>
        <p class="txt">説明が入ります01。</p>
      </div>
    </li>
  </ul>

  <!-- モーダル -->
  <div class="modal-block">
    <div class="img-section">
      <span><!-- close btn --></span>
      <img id="popup" src="#">
      <div class="txt-box">
        <p class="ttl">ここにクリックした画像のタイトルを入れたい</p>
        <p class="txt">ここにクリックした画像の説明文を入れたい</p>
      </div>
    </div>
  </div>
</div>

  $(".hoge-item .img-box >img").click(function () {
    var src = $(this).attr("src");
    $(".modal-block").fadeIn()
    $(".modal-block").css("display", "flex")

    $("#popup").attr("src", src);

  })
  $(".img-section >span").click(function () {
    $(".modal-block").css("display", "none")
  })

Answer 1

一案として、現状では$(".hoge-item .img-box >img") の画像に対してクリックハンドラを設定していますが、これを.hoge-item の li に設定することにして、以下のように修正するとできます。

$(".hoge-item").click(function () {
  const src = $(this).find("img").attr("src");
  const ttl = $(this).find(".ttl").text();
  const txt = $(this).find(".txt").text();  
  $(".modal-block")
    .fadeIn()
    .css("display", "flex")
    .find('img').attr("src", src)
    .end()
    .find('.ttl').text(ttl)
    .end()
    .find('.txt').text(txt);
});

このようになります 👉 https://codepen.io/75hay/pen/vYdVOjw

Comments

[microbe]

ありがとうございます！
思っていた動作が完璧に実現できていました。CodePenの方でもありがとうございます！！

初心者の私にもわかり易く、簡潔なコードで驚きました。

こちらのコードを見て、これまで複雑に思えていたことがシンプルで簡単なことに思えました。
なんだかスッキリしました。

こんな事言うと気分を害されるかもしれませんが、素敵なコードだと思いました。

対面で感謝できないのが残念です、、

この度は、ありがとうございます！！！！

[退会済みユーザー]

ありがとうございます。
javascript という言語そのものの特徴や出来ることを理解し、jQueryも含めてて便利なメソッドを使いこなせるようになると、何かまとまった操作をするときに大量のコードを書かなくても済ませることができるようになります。
頑張ってください。