클릭으로 표시 화면이 전환되는 메모 앱을 jQuery의 index 메소드로 만든다

localstrage를 사용한 메모 앱을 작성하는 도중에 index 메소드에 대한 배움이 있었으므로 여기에 쓰고 싶습니다.

만든 기능

나열된 메모를 클릭하면 오른쪽에 크게 표시된다는 기능.
※jQuery의 버전은 3.6.0입니다.

코드

전제

실제로는 localstrage를 이용해 데이터의 취득, 표시를 실시하기 때문에 이와 같이 메모 일람이 베타 치는 것은 없습니다. 이번은, 클릭한 메모를 별도의 테두리에 표시시키는 기능을 메인에 기재하고 싶기 때문에 이런 코드가 되고 있는 것 이해해 주시면 다행입니다.

index.html

<!-- メモ一覧 -->
<div class="memo">
  <div class="memo-all">
   <p class="title">桃太郎</p>
   <p class="text">鬼退治に行く</p>
  </div>
  <div class="memo-all">
   <p class="title">さる</p>
   <p class="text">鬼退治についていく①</p>
  </div>
  <div class="memo-all">
   <p class="title">いぬ</p>
   <p class="text">鬼退治についていく②</p>
  </div>
  <div class="memo-all">
   <p class="title">きじ</p>
   <p class="text">鬼退治についていく③</p>
  </div>
</div>

main.js

// クリックしたメモのタイトルを右側に表示
$(".memo-all").on("click", function () {
    let index = $(".memo-all").index(this);
    let title = $(".title").eq(index).html();
    $(".textarea-title").html(title);
    console.log(index, title);
});

// クリックしたメモの本文を右側に表示
$(".memo-all").on("click", function () {
    let index = $(".memo-all").index(this);
    let text = $(".text").eq(index).html();
    $(".textarea-text").html(text);
    console.log(index, text);
});

해설

main.js

// クリックしたメモのタイトルを右側に表示
$(".memo-all").on("click", function () {
    let index = $(".memo-all").index(this);
    let title = $(".title").eq(index).html();
    $(".textarea-title").html(title);
});

먼저 메모 제목을 표시합니다.
먼저 memo-all에 on("click)를 부여합니다.

main.js

$(".memo-all").on("click", function () {

});

그러나 이대로는 memo-all 의 class를 가지는 모두에 적용되기 (위해)때문에, index 메소드를 사용합니다. index 메소드를 기술하는 것으로 같은 class명이라도 몇번째의 요소인가를 지정할 수가 있습니다.

main.js

    let index = $(".memo-all").index(this);
    let title = $(".title").eq(index).html();

index에 대해 참고로 한 기사
jQuery에서 특정 요소가 몇 번째로 있는지 얻기 : index ()

main.js

    $(".textarea-title").html(title);

마지막으로 표시시키고 싶은 영역의 class를 지정해 html 메소드로 취득한 요소를 삽입해 주면 완료입니다.