クリックで表示画面が切り替わるメモアプリをjQueryのindexメソッドで作る

10652 ワード
JavaScript jQuery JavaScript テキストリンク

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メソッドで取得した要素を挿入してあげれば完了です。